Question

我遇到了很多ajax调用来改变html的相同部分的情况。这个html代表一个网格。在更改ajax调用中的html后，我将事件处理程序附加到网格的事件。当用户点击刷新按钮时，我执行相同的ajax调用，设置新的html代码，并再次添加一个事件处理程序来监听网格事件。

我想知道每次刷新我的网格并添加一个新的事件处理程序，如果前一个事件处理程序仍然在内存中，如果是，那么这种情况下的最佳做法是什么？（例如，在放入新的html之前解除绑定事件处理程序）

以下是我所做的一个例子：

$.get(this.config.actionLoggingUserListUrl, viewModel, function (data) {
    MyNamespace.ui.hideGridAnimation($("#LoggingActionUsersList"));

    if (data.success) {
        $("#validationSummary").html("");

        $("#usersList").html(data.result);

        $("#LoggingActionUsersList").click(function() {
            console.log("Here is my event handler attached multiple times!");
        });
    }
    else {
        $("#validationSummary").html(data.result);

        $("#usersList").html("");
    }
});

请注意，我在这种情况下正在讨论的事件处理程序是：

$("#LoggingActionUsersList").click(function() {
   console.log("Here is my event handler attached multiple times!");
});

Answer 1

为什么每次拨打电话都要绑定它？

您每次都要添加到堆栈中。你没有替换它。最佳解决方案是使用并执行一次。

其他解决方案是在添加click事件之前取消绑定click事件。此解决方案的问题是，如果其他任何内容添加了click事件，您只需删除它。

Answer 2

事件处理程序堆栈，所以是的，这是一个memork泄漏。可能是一个相当微不足道的，但它的原则多于效果。除非由于某种原因你确实需要动态事件处理程序（因为它没有很多实际用途而很少使用），我强烈建议将事件处理程序赋值从ajax调用中拉出来。 / p>

如果确实需要更改事件处理程序，那么巧妙的方法就是让你的事件处理程序足够聪明，以便对它所分配的对象有所了解。这样，您可以在事件处理程序中根据对象的当前标识执行不同的操作，而不是每次都添加新事件。

内存泄漏javascript中未使用的事件处理程序

2 个答案: