javascript - Why a click event in jquery doesn't apply to my new element? -



javascript - Why a click event in jquery doesn't apply to my new element? -

i have 3 divs left, center , right classes , want interchange position , apply new classes go thei new positions. reason doesn't work script:

$(function() { $(".left").css("left","50px"); $(".center").css("left","300px"); $(".center").css("width","300px"); $(".center").css("height","300px"); $(".center").css("top","25px"); $(".right").css("left","650px"); $(".right").click(function(){ $(".left").animate({ left: '650px' }, 1000, function() { }); $(".center").animate({ left: '50px', width: '200px', top: '75px', height: '200px' }, 1000, function() { }); $(".right").animate({ left: '300px', width: '300px', height: '300px', top: '25px' }, 1000, function() { }); $(".bule").removeclass("left right center"); $(".second").addclass("left"); $(".third").addclass("center"); $(".first").addclass("right"); $(".bule").removeclass("first sec third"); $(".left").addclass("first"); $(".center").addclass("second"); $(".right").addclass("third"); }); });

here working example.

when select elements using jquery selector $('...') - selection evaluated , next actions taken on elements. if later, remove class or alter id of selected element, actions have been taken - stick. similarly, won't automatically inherit actions other selectors (since didn't have class/id @ time selection made).

if want bind events once, , have them work when new elements added, or classes changed, need utilize different event syntax:

$('body').on('click', '.right', function() { });

notice how selector body element (since body element exist when runs). telling jquery here bind click event <body> element, and, when kid of <body> clicked, evaluate element against look .right. if look matches, phone call function.

this method takes advantage of javascript event propagation, events bubble way highest ancestor. means clicking on link within of div trigger click event link, div, , body - in order.

javascript jquery css css3

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -