使用.on()方法将事件处理程序附加到文档时无法删除特定的事件处理程序。

Question

这是一个简单的示例，用来演示我的情况...

http://jsfiddle.net/UnsungHero97/EM6mR/17/

我所做的是为当前和未来的元素添加事件处理程序，使用.on()。当发生某些事情时，我想能够删除特定元素的这些事件处理程序；在这个例子中，当选中单选按钮时，应该删除蓝色元素的事件处理程序，并且点击这些元素不应该再有任何反应。

它似乎没有起作用:(

如何删除与.on()创建的附加到document的事件处理程序，针对这些特定的蓝色元素？

- Hristo

---

http://api.jquery.com/die/ - user956584

die() 不是已经被移除了吗？至少已经被弃用了！ - adeneo

.die()已经被弃用了。.off()是新的.die()。 - Hristo

Answer 1

你的.on()和.off()的签名必须匹配。

这两个不匹配，所以.off()调用将无法找到匹配的事件处理程序来移除：

$(document).on('click', '.btn', function() {
    update();
});

$(document).off('click', '.blue');

请注意，传递给 .on() 和 .off() 的选择器是不同的。

---

使用 .on() 的动态形式（将选择器作为参数传递给 .on()）时，您无法仅删除部分项目。这是因为只有一个事件处理程序安装在根元素上，而jQuery只能完全删除或不删除。因此，您不能只 .off() 动态项中的某些内容。

您可以使用以下选项删除所有事件处理程序：

$(document).off('click', '.btn');

然后，安装一个新的事件处理程序，排除掉你不想要的项目，例如：

$(document).off('click', '.btn:not(.blue)');

或者，教事件处理程序本身如何忽略.blue元素：

$(document).on('click', '.btn', function() {
    if (!$(this).hasClass('blue')) {
        update();
    }
});

- jfriend00

---

怎么只对蓝色元素使用.off()方法？ - Hristo

你必须要么删除所有原始事件处理程序并设置一个不包括 .blue 项目的新事件处理程序，要么在事件处理程序中添加逻辑以跳过任何 .blue 项目的处理。你不能仅仅从先前的动态事件处理程序中 .off() 掉一些项目。 - jfriend00

哎呀:( 好的...谢谢您的解释。请把它包含在您的回答中？ - Hristo

@Hristo - 我的回答中添加了额外的信息。 - jfriend00

让我抓狂的是让.off()起作用...我确定有人说过签名必须匹配，但我从未看到过。谢谢你！ - AS7K

Answer 2

注意如何附加事件；对我来说，以下方式效果很好：

$('.btn').on('click', function() {
    update();
});

$('#disable').on('change', function() {
        $('.btn').off('click');
});

- faino

---

但这并不适用于我的情况。使用 $('.btn').on('click', function() {...}) 将无法为未来的 .btn 元素工作。 - Hristo

Answer 3

唯一的方法似乎是：

$('#disable').on('change', function() {

        $(document)
           .off('click', '.btn')
           .on('click', '.btn:not(.blue)', update);
    });

- A. Wolff

---

这似乎非常低效...删除所有事件处理程序，然后将它们全部添加回来，同时忽略蓝色的那些... - Hristo