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

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被清空，但是与我的复选框相关的所有事件似乎都.ajaxHolder ，因为它们出现在我的独立DOM树中。

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

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

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

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

那么这也是正确的方法吗？ 对于这个.ajaxHolder我可以附加多少东西是否有限制，或者这样做没有问题？

编辑：这是我的控制台的图像，如果这有帮助的话。

Answer 1

不确定这仍然是相关的，但是从我收集的控制台图像中你使用的是bootstrap工具提示，它们似乎持有对DOM节点的引用。 我建议你通过API调用destroy方法

Answer 2

jQuery事件解绑和删除元素可以使用以下方法：

$ .off（）

$一个.remove（）

Answer 3

执行此操作的最佳方法是使用$（selector）.off（）取消绑定所有事件侦听器。 方法，然后使用$（selector）.remove（）;删除元素。

它会因为事件处理程序而停止发生的所有内存泄漏。