Question

我有两个一起工作的jquery函数，一个取决于一个类，另一个取消该类。

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

怎么回事？

以下是fiddle，请亲自试用。

<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() 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

Answer 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

Answer 3

当选择器运行时，它会获取一个元素列表，包括有问题的元素，并为其添加一个click事件处理程序。

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

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

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

3 个答案: