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

Question

这里有一个简单的小提琴来演示我的情况…

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

我正在做的是为当前&元素，使用.on()。我希望能够删除这些事件处理程序的特定元素时发生的事情;在小提琴的例子中，当单选按钮被选中时，蓝色元素的事件处理程序应该被删除，并且单击这些元素不应该再做任何事情。

它似乎不工作:(

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

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

Answer 2

注意事件的附加方式;

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

Answer 3

唯一的办法似乎是:

$('#disable').on('change', function() {
        $(document)
           .off('click', '.btn')
           .on('click', '.btn:not(.blue)', update);
    });