一个 jQuery 类悖论答案

【问题标题】：A jQuery Class Paradox一个 jQuery 类悖论
【发布时间】：2012-05-14 15:29:17
【问题描述】：

我无法理解。

当我想从div 中删除类B 并添加类D 到其中，

有效。

但是类D的功能不能被触发。

$('.B').click(function() { 
        $('.A').animate({
           "left": "+=10%"
        },{
           duration:1000,
           complete: function(){
              $("#C").addClass("D").removeClass("B");
              } 
           }); 
});  



 $(".D").click(function() { 
        $(".A").animate({
            "top":"+=40%"
        },{
            duration:2000,
            complete:function(){
                 $("#C").addClass("B").removeClass("D");
             }
          });
});

我尝试将D 类的函数放入B 类的函数中，如下所示：

$('.B').click(function() { 
        $('.A').animate({
           "left": "+=10%"
        },{
           duration:1000,
           complete: function(){
              $("#C").addClass("D").removeClass("B");
              $(".D").click(function() { 
                   $(".A").animate({
                       "top":"+=40%"
                   },{
                       duration:2000,
                       complete:function(){
                           $("#C").addClass("B").removeClass("D");
                       }
                   });
               }); 
              } 
           }); 
});

这两个函数都是第一次工作，之后它们的行为就变得奇怪了。

如果有人能向我解释原因并为我提供解决方案，我将不胜感激。

【问题讨论】：

标签： jquery class function

【解决方案1】：

当您使用$.click 时，您只绑定到与选择匹配的元素当时。如果您还想匹配所有未来的元素，请改用$.on：

$("body").on("click", ".D", function(){
  /* Class D Stuff */
});

这将反应被点击的元素是否以class="D"开头，或者它后来通过$(this).addClass("D")之类的东西获得它。

"body" 部分理想情况下应该是一个更接近您点击的元素的容器。例如，如果您有以下情况：

<body>
  <div id="container">
    <a href="#" class="B">Foo</a>
    <a href="#" class="D">Bar</a>
  </div>
</body>

您应该在 jQuery 函数中使用 #container 而不是 body。

【讨论】：