jQuery off() 实现不起作用答案

【问题标题】：jQuery off() implementation not workingjQuery off() 实现不起作用
【发布时间】：2013-01-18 20:17:35
【问题描述】：

我在这里做错了什么？我阅读了文档，但似乎无法弄清楚为什么这不能按预期工作。

    $(".img-edit-button").on("click", function () {
       if(self.elementMenuOpen === false){
           self.showImageMenu();
           self.elementMenuOpen = true;
       }else{
           self.hideImageMenu();
           self.elementMenuOpen = false;
       }
});

然后，我用off()

$(".img-edit-button").off();

但即使在使用.off() 之后，事件似乎也增加了一倍，我错过了什么吗？

【问题讨论】：

对不起，这只是示例中的错字
您要关闭哪些事件？ .off('click')
你的 self 变量来自哪里？
最新的文档有这样的“至少，必须提供命名空间或事件名称。” api.jquery.com/off
我对 Jquery 不太擅长，但您尝试过 $(".img-edit-button").off().on(//your code here); 吗？它会在每次绑定之前取消绑定事件。

标签： events event-handling jquery

【解决方案1】：

这直接来自http://api.jquery.com/off/“off() 方法删除了使用 .on() 附加的事件处理程序”。所以如果你在 off 被调用后绑定一个 click 事件，它们会继续被执行。我猜你是多次重新绑定到点击事件。

一种解决方案是将事件绑定到父级，只绑定一次，这样您就不必每次在 dom 中添加/删除相关元素时都重新绑定。我知道这可能会带来一些性能问题，但是让您的父类尽可能深入 dom 将对此有所帮助。

$(".someparentclass").on('click','.img-edit-button',function(){});

或者如果你想重新绑定你可以使用以下：

$(".img-edit-button").off().on(function(){});

http://jsfiddle.net/SEndX/3/

【讨论】：

【解决方案2】：

您可以尝试使用一些“切换”功能来显示和隐藏菜单。您可以找到here 的选项。

【讨论】：

toggle 在这种情况下不适用，我正在尝试删除事件处理程序“click”，以便在再次调用时不会堆叠。

【解决方案3】：

旧的但只是想有人可能仍然会遇到这个。如果你要取消它，那么如果没有分配任何内容，它就不起作用。它不会总是触发错误，但会阻止代码正确执行。在页面加载时，请确保在事件中添加空白。 $('#selector').on(); 无论如何都适合我。

【讨论】：

【解决方案4】：

这为我修复了它，添加了空的 $(..).on();关于 de document ready 方法。

【讨论】：

【解决方案5】：

在某些情况下，您不想将事件直接绑定到元素。相反，您希望将其绑定到父元素，例如“body”。当您想要全局定义事件侦听器但该元素可能尚不存在时，这是必不可少的：

$("body").on("mouseenter", ".hover-item", function() {
    // do the thing
}

这里的问题是，如果您尝试在.hover-item 上运行.off()，它将不起作用。或者，如果您尝试在 body 上使用 .off()，则使用 .children() 也无济于事。

我认为最好将您的事件绑定到特定的类名，而不是使用.off()，当您想要禁用这些事件时，请删除类名：

$(".the-element").removeClass(".hover-item");

现在该特定元素将不再启用事件侦听器。但是，由于您从技术上在body 上定义了事件侦听器，因此如果您以后需要再次启用悬停效果，您可以使用addClass(".hover-item")，一切都会正常工作。

现在，这实际上仅适用于您为多个项目设置一个动画的情况。悬停事件就是一个很好的例子。例如，您可以将相同的事件应用于所有按钮，而不是将不同的悬停事件应用于不同的按钮。但是，如果您只想禁用某个特定按钮的悬停事件，那么这是可行的方法。

【讨论】：