在单页面应用程序中取消绑定事件侦听器和删除子元素的正确方法是什么？

Question

我一直在构建一个大型单页面应用程序,最近开始探索JS中的内存泄漏.而且我认为我有内存泄漏因为 - 因为我在Chrome中使用Profiles(快照)功能 - 我看到我有很多独立的DOM元素.

这是我的设置的简化视图:

<div id="container">
  <div class="buttons">
    <a class=".btn" href="/someurl/"> Button A</a>
    <a class=".btn" href="/someurl/"> Button B</a>
    <a class=".btn" href="/someurl/"> Button C</a>
  </div>

  <div class="ajaxHolder"></div>
</div>

因此,如果用户单击按钮A,我会使用AJAX调用将内容加载到.ajaxHolder.像这样的东西:

//This is the content...
<div class="contentA">
  <p>some text...</p>
  <input type="checkbox" class="checkbox">
  <input type="checkbox" class="checkbox">
  <input type="checkbox" class="checkbox">
  <input type="checkbox" class="checkbox">
</div>

我的MAIN脚本文件中也有两个函数.一个是这样的:

//Click event bound to a.btn which tigger the ajax call
$(.buttons).on('click', '.btn', function(){ 
  //Do ajax here...
  //on success...
  var holder = $(".ajaxHolder");
  holder.children().off().remove(); // Is this the way to do this??
  holder.off().empty(); //I don't think I need .off() here, but I guess it can't hurt...
  holder.append(ajaxSuccessData);
});

到现在为止还挺好.但是现在加载了内容,我在MAIN脚本文件中也有这个功能:

//So here, I am binding an event to the checkboxes...
$(".ajaxHolder").on('change', '.checkbox', function(){
  //Do something...
});

所以现在如果用户按下按钮B,例如,.ajaxHolder清空,但所有那些与我的复选框相关的事件似乎都停留在那里,因为它们出现在我的独立DOM树中.

我在这里错过了什么？如何在这样运行的单个页面应用程序中确保我没有任何分离的DOM元素？

奖金问题:我有很多事件像这样:

$(".ajaxHolder").on('someEvent...','.someClass....', someFunction());

也就是说,一切都总是附在我身上.ajaxHolder,因为我必须使用事件委托,因为它.ajaxHolder总是存在 - 而其他加载的项目并不总是存在,所以我不能简单地做$(button).on('click')...,等等.

那么这也是正确的方法吗？我可以附加多少内容.ajaxHolder或者这样做是否有问题？

编辑:这是我的控制台的图像,如果这有帮助的话.

Answer 1

可以通过以下方法解除 jQuery 事件绑定和删除元素：

$.off()

$.remove()