我一直在构建一个大型的单页应用程序,最近开始探索JS中的内存泄漏.而且我觉得我有一个内存泄漏,因为我使用Chrome中的Profiles(Snapshot)功能 – 我看到我有很多分离的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>
//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将永远存在 – 而其他加载的项目并不总是存在的,所以我不能简单地做$(按钮).on (“点击”)…等
那么这样做也是正确的呢？是否有限制我可以附加到这个.ajaxHolder或有没有问题这样做？
编辑：这是一个我的控制台的图像,如果这有帮助.
