删除类后，JQuery 选择器仍然有效吗？答案

【问题标题】：JQuery selector still working after I remove the class?删除类后，JQuery 选择器仍然有效吗？
【发布时间】：2014-04-09 20:29:53
【问题描述】：

我有两个一起工作的 jquery 函数，一个依赖于一个类，另一个删除了这个类。

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

怎么了？

这里是fiddle，你自己试试吧。

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

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

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

【问题讨论】：

即使你已经移除了类，动作已经被绑定到元素上。它不会自动解除绑定。

标签： javascript jquery html

【解决方案1】：

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

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

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

这会在当时与选择器匹配的任何对象上安装一个事件处理程序。这些事件处理程序将永远存在。他们不再关注任何元素有哪些类。因此，在安装静态事件处理程序后更改类不会影响哪些元素上有事件处理程序。

如果您想要动态行为，其中哪些元素响应事件确实取决于在任何给定时刻存在的类，那么您需要使用委托事件处理。

使用委托事件处理，您可以将事件“永久”附加到父级，然后父级会在每次触发事件时评估事件起源的子级是否与选择匹配。如果孩子不再匹配选择，则不会触发事件处理程序。如果是，那么它会，并且您可以添加/删除一个类以使其改变行为。

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

$("#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() method for adding a click event after loading dynamic html

jQuery .on does not work but .live does

Should all jquery events be bound to $(document)?

JQuery Event Handlers - What's the "Best" method

jQuery selector doesn't update after dynamically adding new elements

【讨论】：

我实际上是在发布问题后才发现这一点的，但是非常详细的解释。
很棒的答案。谢谢。
这是我搜索了一个小时的内容。非常感谢！！

【解决方案2】：

在绑定事件处理程序后更改类绝对没有效果，因为事件处理程序不是突然解除绑定，它仍然绑定到同一个元素。

您必须检查事件处理程序中的类

$('.container > a').click(function (e) {
    if ( $(this).closest('.container').hasClass('disabled') ) {
        e.preventDefault();
        e.stopPropagation();
    }
});

$('input[type=checkbox]').change(function () {
    $('.container').toggleClass('disabled', !this.checked);
});

FIDDLE

【讨论】：

为什么不直接使用委托事件处理程序，以便事件处理程序本身动态响应添加/删除的类？
@jfriend00 - 这是一种选择，在这种情况下，我会检查班级是否存在，但这只是我，任何一种方式都可以。
@jfriend00 - 这就是委托处理程序所做的，它检查目标是否具有该类，所以我自己做我限制了事件处理程序触发的元素数量，我至少喜欢认为这样更有效。

【解决方案3】：

When the selector runs, it gets a list of elements including the one in question and adds a click event handler to it.

然后你删除了这个类——所以任何后续的 jQuery 选择器都不会得到你的元素——但是你已经附加了这个事件，所以它仍然会触发。

您使用的选择器在您声明它的行上运行 - 当点击发生时它不会延迟初始化。

【讨论】：