为什么jquery中的click事件不适用于我的新元素？
[英]Why a click event in jquery doesn't apply to my new element?
问题描述
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. 
我有三个div，分别具有左，中和右类，我想交换他们的位置，并在他们转到新位置时应用新类。 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");
});
});
1 个解决方案
解决方案1
4 已采纳 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. 当您使用jQuery选择器$('...')选择元素时-会对选择进行评估，并对这些元素执行以下操作。 If later, you remove a class or change the ID of a selected element, those actions have already been taken - so they will stick. 如果以后再删除某个类或更改所选元素的ID，则说明这些操作已经执行-因此将继续执行。 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). 同样，它们不会自动继承其他选择器的操作（因为在进行选择时它们没有该类/ ID）。
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). 请注意，选择器现在是body元素的原因（因为运行时body元素将始终存在）。 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 . 您在这里告诉jQuery的是将click事件绑定到<body>元素，然后，当单击<body>的子代时，请根据表达式.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. 此方法利用了javascript事件传播的优势，其中事件一直冒泡直至其最高祖先。 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. 这意味着在div内的链接上单击将触发该链接，div和主体的单击事件-按该顺序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.