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

我有一个元素包含在具有 active 类的父元素中，如下所示:

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

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

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

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

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

最佳答案

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

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

如果您希望它更加动态，请放置 a .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/

关于jquery - 当我删除类时，为什么我的 jQuery 选择器没有注意到？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4661956/