JQuery Dialog的内存泄露问题解决方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery Dialog的内存泄露问题解决方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2739字，纯文字阅读大概需要4分钟。

内容图文

$('#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元素消失了！
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的JQuery Dialog的内存泄露问题解决方法全部内容，希望文章能够帮你解决JQuery Dialog的内存泄露问题解决方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端