對於頁面來說，JQuery中的Dialog從效果上來說還可以，而且使用簡單，只要短短幾行綁定的代碼就可以實現彈出效果。
代碼
代碼如下:
$('#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元素消失了！