javascript - 删除该元素时，Html 元素的事件不会被删除

Question

我有一些事件绑定(bind)在我的主干 View 中。

sampleView = Backbone.View.extend({
events: {
              "click .sum": "sumButtonFunc",
              "click .diff": "diffButtonFunc"
        }
sumButtonFunc: function(){
    console.log("sum called")
}
diffButtonFunc: function(){
    console.log("diff called");
}
});

这是 HTML 代码:

<div class="panel">
<button class="sum" type="button">Sum</button>
<button class="diff" type="button">Diff</button>
</div>

当我初始化这个模型时，这些按钮是可见的。

我正在使用 jquery.remove() 函数删除这些函数。

this.$el.find('.panel').remove();

当我在其他地方再次初始化此 View 时，这些按钮的事件(前一个实例的事件)仍然保留在上下文中，并且该事件被触发两次。如果我第三次重新初始化模型，也会发生同样的情况，事件将被触发三次。

如何解决这个问题？

Answer 1

你的 View 中的 $el 是什么？

backbone 委托(delegate)您的 $el 上的事件。当您重新初始化 View 时，事件将再次委派。 (它在 $el 上使用 jquery 的 delegate() 方法)

在重新初始化 View 之前，您希望从 DOM 中完全删除 $el，因为将在同一个 $el 上再次调用委托(delegate)。从你的代码来看，我认为 .panel 只是你观点的一部分。

另一种方法是在卸载 View 时调用 [yourView].undelegateEvents()。