|
|
代碼
復制代碼 代碼如下:
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
在一些JS交互性不多的一般頁面來說，沒有任何問題！但是對于交互性強的，需要動態加載與釋放DOM的頁面來說，它就是一個悲劇的東西！為什么這樣說？大家看下下面的例子：
一段簡單的代碼，一個DIV是通過動態加載到頁面上，然后對該DIV用Dialog進行綁定，以達到彈出的目的！下面的test元素就是<div id="test"></div>。
代碼
復制代碼 代碼如下:
function TestAppend() {
$("#test").append('<div id="dialog"><div id="fileQueue"></div> <input type="file" name="uploadify" id="uploadify" />' +
'<a href="Javascript:upload();">上傳</a>' +
'<a href="Javascript:$(#uploadify).uploadifyClearQueue()">取消上傳</a><div>');
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
return false;
}
接著，我需要刪除該DOM元素，一般來說，正常的做法都是$("#test").empty();這行簡單的代碼就完成了！這樣有效嗎？！當執行完這樣代碼后，你再用$('#dialog')來獲取dialog元素，郁悶的事情發生了，既然獲取到了！為什么！不是已經empty了嗎！
下面我們來看下這一悲劇是如何造成的，
我們把注意點放到$('#dialog').dialog上面，然后看看JQuery的實現代碼是如何寫的，當我們跟蹤代碼到dialog類中的_create方法的時候，問題的原因找到了，看下面這段代碼：
復制代碼 代碼如下:
uiDialog = (self.uiDialog = $('<div></div>'))
.appendTo(document.body)
.hide()
.addClass(uiDialogClasses + options.dialogClass)
.css({
zIndex: options.zIndex
})
// setting tabIndex makes the div focusable
// setting outline to 0 prevents a border on focus in Mozilla
.attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
if (options.closeOnEscape && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event);
event.preventDefault();
}
})
.attr({
role: 'dialog',
'aria-labelledby': titleId
})
.mousedown(function(event) {
self.moveToTop(false, event);
}),
它既然也動態創建一個div，而且把該div加到了Body上面，然后把dialog中的元素從<div id=test>中移除，加入到該新的div中.....
這就是為什么我們$("#test").empty()后，卻對內部的dialog沒有起作用了！而且這有一個最不好的一個地方，也是最容易出現內存泄露的地方：它動態的在Body中創建了一個div，這樣如果窗體不關閉的話，而你又在不察覺的情況下不斷的使用上面的TestAppend方法來動態加載DOM，就會創建N個這樣的div！
其實這個問題郁悶的地方不是在如何解決，而且隱藏的很深，很難發現！那么發現之后解決起來就變的簡單多了：
復制代碼 代碼如下:
if ($('#dialog')[0]) {
$('#dialog').parent().empty();
$('#dialog').parent().remove();
}
當前加上這段后代碼后，再做$("#dialog")來測試下，期望的結果終于出現了！dialog元素消失了！
JavaScript技術：JQuery Dialog的內存泄露問題解決方法，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
