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

Question

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

我正在做的是使用添加当前和未来元素的事件处理程序.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();
    }
});