删除类后,JQuery选择器仍在工作？

Question

我有两个jquery函数一起工作,一个依赖于一个类,另一个取消了类.

一旦它被删除,我希望功能停止工作,但它继续吗？

这是怎么回事？

这是小提琴,为自己试试.

<div class="container disabled"> 
    <a href="www.google.com">Go to Google</a>
</div>
<label>
    <input type="checkbox" />Enable link</label>

JS

$('.disabled > a').click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    alert('should stop working');
});

$('input[type=checkbox]').change(function () {
    $('.container').removeClass('disabled');
});

Answer 1

看起来您希望使用委托事件处理程序而不是静态事件处理程序.让我解释.

当你运行这样一行代码时:

$('.disabled > a').click(function (e) {

这会在当时与选择器匹配的任何对象上安装事件处理程序.那些事件处理程序将永远存在.他们不再查看任何元素所具有的类.因此,在安装静态事件处理程序后更改类不会影响哪些元素在其上具有事件处理程序.

如果您想要动态行为,哪些元素响应事件取决于在任何给定时刻出现的类,那么您需要使用委托事件处理.

通过委派事件处理,您可以将事件"永久"附加到父级,然后父级将在每次事件触发时评估事件源自的子项是否与select匹配.如果子项不再与select匹配,则不会触发事件处理程序.如果是,那么它将会添加/删除一个类以使其改变行为.

委托事件处理程序的一般形式如下:

$("#staticParent").on("click", ".childSelector", fn);

理想情况下,您希望选择尽可能靠近子项的父项,但不是动态本身.在您的特定示例中,您不显示除body对象之外的父级,因此您可以使用此:

$(document.body).on("click", ".disabled > a", function() {
    e.preventDefault();
    e.stopPropagation();
    alert('should stop working');    
});

然后,当您添加删除disabled类时,此代码将动态响应.如果disabled该类存在,则将触发事件处理程序.如果它不存在,则不会触发事件处理程序.

工作演示:http://jsfiddle.net/jfriend00/pZeSA/

委托事件处理的其他参考:

jQuery .live()vs .on()方法,用于在加载动态html后添加click事件

jQuery .on不起作用但.live确实如此

是应该将所有jquery事件绑定到$(文档)？

JQuery事件处理程序 - 什么是"最佳"方法

动态添加新元素后,jQuery选择器不会更新