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

Question

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

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

我有jQuery设置来处理我的buttondiv 上的点击,但只有当active父div包含该div时,如下所示:

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

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

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

Answer 1

处理程序根据运行时在选择器中找到的结果分配一次(我猜想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/