Question

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

    $(".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()之后，事件似乎也在加倍，是否有我遗漏的东西？

Answer 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/

Answer 2

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

Answer 3

旧但只是想到有人可能仍会遇到这个问题。如果您打算关闭它，如果没有分配任何内容则无效。它不会总是触发错误，但会阻止代码正确执行。在页面加载时，请确保在事件上添加空白。 $（ '＃选择'）上（）; 无论如何都适合我。

Answer 4

这为我修好了，添加了空的$（..）。on（）;关于de document ready方法。

Answer 5

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

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

此处的问题是，如果您尝试在.off()上运行.hover-item，则无效。或者，如果您尝试在.off()上使用body，则使用.children()也不会执行任何操作。

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

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

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

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

jQuery off（）实现不起作用

5 个答案: