在單頁面應用程序中取消綁定事件偵聽器和刪除子元素的正確方法是什么？

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（）;刪除元素。

它會因為事件處理程序而停止發生的所有內存泄漏。