jQuery点击事件可以解除绑定或重置吗？答案

【问题标题】：Can jQuery click events be unbound or reset?jQuery点击事件可以解除绑定或重置吗？
【发布时间】：2012-09-27 16:27:00
【问题描述】：

我在我正在处理的网页上发现了资源泄漏。

此网页有两个文本字段，单击时会显示模式对话框，向后端执行数据请求，然后在表格中显示该信息，用户可以从中选择一个条目以在他们最初单击的文本框中使用。

我将点击事件绑定到文本框，如下所示：

var $field = $('#one-of-the-text-fields');

$field.click(function () {
        App.DialogClass.show();
        App.DialogClass.PopulateTable();
        App.DialogClass.GotoPageButtonAction(actionArgs);  // Offender!
});

...调用...

App.DialogClass = (function($) {

var pub {},
    $gotoPage = $('#pageNumberNavigationField'),
    $gotoPageButton = $('#pageNumberNavigationButton');

// ...SNIP unimportant other details...

pub.GotoPageButtonAction = function (args) {
    $gotoPageButton.click(function () {
        var pageNumber = $gotoPage.val();
        pub.PopulateTable(args);   // Breakpoint inserted here...
    });
};

return pub;

})(jQuery);

我注意到了泄漏，因为当我使用 Chrome 的 JavaScript 调试器运行时，每次单击不同的按钮时总是会遇到一个额外的断点（例如，当我第一次单击字段 A 时，断点会被命中两次。当之后我点击字段 B，断点被击中 3 次。如果我在 之后点击 A，则断点被击 4 次。根据需要进行推断。）

在我的代码中，我没有对给定字段的现有点击事件做任何事情。我怀疑我的泄漏源于事件没有得到清理的事实。话虽如此，我对 JavaScript/jQuery 也不是很熟悉。从控件中删除点击事件有哪些技巧？

【问题讨论】：

api.jquery.com/unbind
.unbind() ？ api.jquery.com/unbind
off() 在较新的 jquery 版本上
如果使用jQuery 1.7+，你应该使用on()和off()，但问题可能是你在一个运行多次的函数中绑定了点击，绑定了点击及以上，因为这往往会导致这个确切的问题。

标签： javascript jquery html memory-leaks

【解决方案1】：

当然。只需解开它们：

$field.unbind('click');

但是，请记住，这将删除所有 click 事件处理程序，而不仅仅是您的。为安全起见，绑定处理程序时应使用命名空间：

$field.bind('click.mynamespace', function(){
    // do something
});

那么，

$field.unbind('click.mynamespace');

那么，只有你的处理程序会被删除。

【讨论】：

【解决方案2】：

如果您使用 .bind() 绑定它们 .unbind() 删除事件

如果您使用 .on() 绑定它们 .off() 删除事件

【讨论】：

"从 jQuery 3.0 开始，.unbind() 已被弃用。自 jQuery 1.7 起，它已被 .off() 方法所取代，因此不鼓励使用它。"

【解决方案3】：

JQuery 提供了unbind 函数来解除事件监听器的绑定。

请注意，您也可以使用 removeEventListener 在原版 JS 中执行此操作。

但您可能不应该每次都在GotoPageButtonAction 中绑定，而不是取消绑定：一次就足够了。

【讨论】：

由于我正在处理的分页系统的性质，我必须执行重新绑定，因为后端中的请求取决于单击的字段。我通常不会在点击时执行重新绑定，但这种情况是一次性的。