Question

有许多引导选项卡，每个选项卡都有包含大量“td”元素的示例表。我们在活动选项卡的td上绑定click事件。为了提高性能，我们希望每次用户更改标签时取消绑定上一个标签的点击事件。

（'显示'事件是在所有过渡完成后）

$('a[data-toggle="tab"]').on('shown', function (e) {

    var newt = $(e.target).attr("href"),
        prevt = $(e.relatedTarget).attr("href");

    console.log("new tab: " + newt) // activated tab
    console.log("prev tab: " + prevt); // previous tab

    $(newt + " tbody").on("click", "td", function (e) {
        console.log("click");
    });

    var validate = function () {
        console.log("prev click ok");
    };
    $(prevt + " tbody").off("click", "td", validate);
});

通常情况下，如果您访问演示并单击“配置文件”选项卡然后单击“主页”，则应在控制台中显示一条消息“prev click ok”，以便我们知道上一个选项卡中的事件已经unbinded。

为什么功能验证无法正常工作？... 谢谢！

Answer 1

你错误地认为.off()是如何运作的。它只是取消绑定事件处理程序。它不执行传递给它的回调函数。您只传递回调函数，以便.off()函数可以匹配要删除的正确事件处理程序，如果传递，它必须是传递给.on()的完全相同的函数。当你拨打.off()时，它实际上并没有被调用。

要使.off()正常工作，您必须传递与事件注册完全相同的回调函数，或者您必须不传递回调（在这种情况下，所有将被取消注册）。现在，您传递的回调与事件无关，因此没有事件被取消注册。

重要的是，.off()调用必须与您尝试取消注册的.on()调用具有完全相同的签名。因此，无论.on()调用是什么样的，请确保.off()调用看起来相同。这意味着事件名称必须相同，选择器必须相同，并且回调函数需要根本不传递或相同。

如果这是您要撤消的内容：

$(newt + " tbody").on("click", "td", function (e) {
    console.log("click");
});

然后，你想要使用它：

$(prevt + " tbody").off("click", "td");

如果您只是尝试定位该特定回调，那么您需要将第一个回调放入一个函数中，以便它可以用于.off()，如下所示：

function logClick(e) {
    console.log("click");
}

$(newt + " tbody").on("click", "td", logClick);

.off()将使用相同的功能：

$(prevt + " tbody").off("click", "td", logClick);

jquery .on事件函数触发（+ jsfiddle）

1 个答案: