Question

我无法理解这一点。

当我想从B和添加类div中删除类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");
                       }
                   });
               }); 
              } 
           }); 
});

并且这两个函数都适用于第一次，之后它们以奇怪的方式行事。

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

Answer 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。

一个jQuery类悖论

1 个答案: