Question

我有一个元素包含在类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类消失后单击顶行中的框，也会出现问题。我希望警报不会弹出，但它仍然存在。

Answer 1

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

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

如果您希望它更具动态性，请将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/

Answer 2

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

查看jQuery live。