jquery .off似乎不起作用

Question

所以我会很简短：jquery .off()不会禁用我用.on设置的.on 。

HTML：

<span id="myspan">lol</span>
<button id="b1">jquery On</button>
<button id="b2">jquery Off</button>

JS：

$("#b1").on("click", add);
$("#b2").on("click", del);

function add() {
    $("#myspan").on("click", function(e) {
        var a = 1;
        testfunc(a, e);
    });
}

function del() {
    $("#myspan").off("click", testfunc);
}

function testfunc(num, event) {
   alert(num);
}

首先，我们通过单击jquery On按钮将testfunc()添加到myspan 。 在我们这样做之后，如果我们点击跨度，我们会收到警报。 接下来，我们单击jquery off按钮。 这应该是删除监听器，但它没有。 即使在那之后，当我们点击myspan testfunc仍然附加。

为什么？ 我该如何删除它？

Answer 1

您的参数不匹配

它不是因为你绑定了一个不同的功能（匿名的）。 然后你试图从testfunc解除绑定...为了使你的事件（un）绑定工作， on和off之间的参数必须匹配 。

可能的解决方法

如果这是元素上唯一的click事件侦听器，那么通过调用以下方法解除匿名函数取消是最简单的方法：

$("#myspan").off("click");

如果您将多个事件处理程序绑定到同一元素上的click事件，那么您还可以通过提供命名空间来区分它们，然后在off函数中使用正确的命名空间。

$("#myspan").on("click.test", function(e) { ... });
...
$("#myspan").off("click.test");

如果您想取消绑定使用相同命名空间绑定的几个不同的事件处理程序，请使用just namespace：

$("#myspan").off(".test");

Answer 2

你没有将事件处理程序绑定到testfunc ，你将它绑定到一个匿名函数，并且你正在调用testfunc ，所以你不能自动取消绑定它。

它也是

$("#myspan").on("click", testfunc); // bind function

然后

$("#myspan").off("click", testfunc); // unbind function

或者解除匿名函数的绑定

$("#myspan").off("click"); // remove all handlers

或者您也可以命名处理程序

$("#myspan").on("click.test", function(e) {
    var a = 1;
    testfunc(a, e);
});

并只删除该处理程序

$("#myspan").off("click.test");

Answer 3

在这个简单的情况下，更换您off这个调用：

function del() {
    $("#myspan").off("click");
}

您不需要将处理函数传递给off函数，如果这样做，它将只删除该特定处理程序。 但是，您没有附加testfunc ，而是一个只调用testfunc()的匿名函数。 因此，您的off呼叫无效。

此外，您从未分配变量testfunc 。