Why a click event in jquery doesn't apply to my new element?
Question
I have three divs with left, center and right classes and I want to interchange their position and apply new classes as they go to thei new positions. But for some reason it doesn't work This is my 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 second third");
$(".left").addClass("first");
$(".center").addClass("second");
$(".right").addClass("third");
});
});
Here is a working example.
1 answers
solution1
4 ACCPTED 2013-02-08 13:49:00
When you select elements using a jQuery selector $('...') - the selection is evaluated and the following actions are taken on those elements. If later, you remove a class or change the ID of a selected element, those actions have already been taken - so they will stick. Similarly, they won't automatically inherit actions from other selectors (since they didn't have that class/ID at the time the selection was made).
If you want to bind events once, and have them work when new elements are added, or classes are changed, you need to use a slightly different event syntax:
$('body').on('click', '.right', function() {
});
Notice how the selector is now the body element (since the body element will always exist when this runs). What you are telling jQuery here is to bind a click event to the <body> element, and, when a child of <body> is clicked, evaluate the element against the expression .right . If that expression matches, call my function.
This method takes advantage of javascript event propagation, where events bubble all the way back up to their highest ancestor. This means that clicking on a link inside of a div will trigger a click event for the link, div, and body - in that order.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.