JQuery Dialog memory leak problem solution

JQuery Dialog memory leak problem solution_jquery

WBOY

Release： 2016-05-16 18:24:57

Original

1060 people have browsed it

For pages, the Dialog in JQuery is not bad in terms of effect, and it is simple to use. It only takes a few lines of binding code to achieve the pop-up effect.
Code

Copy code The code is as follows:

 
$('#dialog'). dialog({ 
autoOpen: false, 
width: 600, 
buttons: { 
"Ok": function() { 
$(this).dialog("close"); 
}, 
"Cancel": function() { 
$(this).dialog("close"); 
} 
} 
}); 

On some general pages with little JS interactivity, there is no problem! But for highly interactive pages that need to dynamically load and release DOM, it is a tragedy! Why do you say this? Take a look at the following example:
A simple piece of code. A DIV is dynamically loaded onto the page, and then the DIV is bound with Dialog to achieve the purpose of pop-up! The test element below is

.
Code

Copy code The code is as follows:

function TestAppend() {
$("#test").append('

'
'Upload'
'Cancel upload

');
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
return false;
}

Next, I need To delete the DOM element, generally speaking, the normal approach is $("#test").empty(); This simple line of code is complete! Does this work? ! After executing this code, you use $('#dialog') to get the dialog element. Something depressing happens, now that you have got it! Why! Isn’t it already empty?
Let’s take a look at how this tragedy was caused.
Let’s focus on $('#dialog').dialog, and then look at how the JQuery implementation code is written. When we When tracing the code to the _create method in the dialog class, the cause of the problem was found. Look at the following code:

Copy code The code is as follows:

uiDialog = (self.uiDialog = $('
')) 
.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); 
}), 

Since it also dynamically creates a div, adds the div to the Body, and then removes the elements in the dialog from

Remove and add to the new div....
This is why after we $("#test").empty(), it has no effect on the internal dialog! And this has the worst thing, and it is also the most prone to memory leaks: it dynamically creates a div in the Body, so that if the form is not closed, you will continue to Using the above TestAppend method to dynamically load the DOM will create N such divs!
In fact, the frustrating part of this problem is not how to solve it, but it is hidden deep and difficult to find! Then after discovering it, the solution becomes much simpler:

Copy the code The code is as follows:

 
 if ($('#dialog')[0]) { 
$('#dialog').parent().empty(); 
$('#dialog').parent().remove( ); 
} 

After adding this code, do $("#dialog") to test, and the expected result finally appeared! The dialog element disappeared!

Related labels：

dialog jquery memory leak

source：php.cn

Previous article：js tool to convert characters to UTF-8 characters_javascript skills Next article：Crazy HTML compression for high-performance WEB development_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn