为什么jquery中的click事件不适用于我的新元素？

我有三个左边，中间和右边的课程，我想交换他们的位置并在他们去新的位置时申请新的课程。但由于某些原因，它不工作这是我的脚本：为什么jquery中的click事件不适用于我的新元素？

$(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是一个工作的例子。

来源

2013-02-08 Dan Ovidiu Boncut

您应该减少重复使用的selet的数量以保持可读性和性能。 ''（“。”）.css（“width”，“300px”）.css（“height”，“300px”）;''甚至更好'$（“。center”）.css（{width：“ 300px“，height：”300px“}）;'例如。 – Stefan 2013-02-08 13:58:13

@Stefan +1 - 总是一个好主意。 – 2013-02-08 14:05:35

当您使用jQuery选择器选择元素$('...') - 评估选择并对这些元素执行以下操作。如果以后，您删除一个班级或更改所选元素的ID，那些操作已经被采纳 - 所以他们会坚持。同样，它们也不会自动继承其他选择器的操作（因为它们在选择时没有该类/ ID）。

如果你想一次绑定事件，并且有当新的元素添加，或类是改变了他们的工作，你需要使用一个稍微不同的事件语法：

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

});

注意选择如何，现在body元素（因为body元素在运行时总是存在）。您在这里告诉jQuery的是将click事件绑定到<body>元素，并且单击<body>的孩子时，请根据表达式.right评估元素。如果该表达式匹配，请调用我的函数。

此方法利用javascript事件传播，其中事件一直回到其最高祖先。这意味着点击div内的链接将触发链接，div和body的点击事件 - 按顺序。

来源

2013-02-08 13:49:00

谢谢。我会尽快接受你的回答。 – 2013-02-08 13:51:39

+1为教学解释。 – Stefan 2013-02-08 13:59:22

你知道我应该如何在我的动画中应用缓动？ – 2013-02-08 14:12:21

为什么jquery中的click事件不适用于我的新元素？

回答

相关问题