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

Question

这是一个简单的小提琴来演示我的情况......

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

我正在做的是为当前和未来的元素添加一个事件处理程序，使用.on(). 我希望能够在发生某些事情时为特定元素删除这些事件处理程序；in the case of the fiddle, when the radio button is selected, the event handler for the blue elements should be removed and clicking those elements should not do anything anymore.

它似乎不起作用:(

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

Answer 1

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

这两个不匹配，因此.off()调用不会找到匹配的事件处理程序来删除：

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

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

注意，传递给.on()and的选择器.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);
    });