jquery - 为什么当我删除一个类时我的 jQuery 选择器没有注意到？

Question

我有一个包含在 class 的父元素中的元素active，如下所示：

<div class="active">
    <div class="button"></div>
</div>

我设置了 jQuery 来处理对我的buttondiv 的点击，但前提是该 div 包含在active父级中，如下所示：

$('.active .button').click(function(){
    alert('Button clicked!');
});

我使用jQueryactive从父类中删除类，即使在删除类之后，当我单击按钮时仍然会弹出警报。这似乎很不寻常，因为按钮不再符合选择器的标准。它发生在 Chrome、Firefox 和 IE 中，所以这似乎是故意的行为。我错过了什么吗？或者至少有一种简单的方法来解决这个问题？

这是一个用于测试目的的简单 JSFiddle 示例：http: //jsfiddle.net/KjuDy/。单击顶行中的一个框。正如预期的那样，这会弹出一个警报并删除active该类。active即使在课程消失后，当您单击顶行中的框时也会出现问题。我希望警报不会弹出，但它仍然会弹出。

score 6 · Accepted Answer

处理程序根据运行时在选择器中找到的结果分配一次（我猜测 DOM 已准备好）。

之后修改这些元素的类不会影响绑定的处理程序。

如果您希望它更具动态性，请将处理程序放置在.delegate()元素的祖先上，

$('#someContainer').delegate('.active .button','click',function(){
    alert('Button clicked!');
});

如果包含所有元素的唯一容器是<body>，那么使用它：

$('body').delegate('.active .button','click',function(){
    alert('Button clicked!');
});

你的例子，更新：http: //jsfiddle.net/KjuDy/1/

score 1 · Accepted Answer

当您第一次绑定 click 事件时，jQuery 将绑定到匹配的 DOM 元素。

看看 jQuery直播。

2 回答 2