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
Post a Comment