JQueryDialog Memory leakage solution _ jquery

For more information about how to avoid Memory leakage of JQueryDialog, see. For the page, the Dialog in JQuery is still effective and easy to use. The pop-up effect can be achieved with just a few lines of bound code.
Code

The Code is as follows:

$ ('# Dialog'). dialog ({
AutoOpen: false,
Width: 600,
Buttons :{
"OK": function (){
$ (This). dialog ("close ");
},
"Cancel": function (){
$ (This). dialog ("close ");
}
}
});

In general pages with few JavaScript interactions, there is no problem! But for highly interactive pages that require dynamic loading and release of DOM, it is a tragedy! Why? Let's take a look at the following example:
A simple piece of code, a DIV is dynamically loaded to the page, and then bound to this DIV with a Dialog, in order to achieve the purpose of pop-up! The following test element is

.
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 this DOM element. In general, the normal practice is $ ("# test"). empty (); this line of simple code is complete! Is this effective ?! After executing the code like this, you can use $ ('# dialog') to obtain the dialog element. The depressing thing happened. Now that we have obtained it! Why! Isn't it empty already!
Let's take a look at how this tragedy was caused,
We place the attention points to $ ('# dialog '). in dialog, let's see how JQuery's implementation code is written. When we track the code to the _ create method in the dialog class, we find the cause of the problem. Let's look at the following 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 p focusable
// Setting outline to 0 prevents a border on focus in Mozilla
. Attr ('tabindex', -12.16.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 p, and adds the p to the Body, and then adds the elements in the dialog from

And add it to the new p .....
This is why we $ ("# test"). empty (), but it does not work for the Internal dialog! In addition, this is the worst part and the most prone to memory leaks: It dynamically creates a p in the Body, so that if the form is not closed, without notice, you constantly use the TestAppend method above to dynamically load the DOM and create N Such p!
In fact, this problem is not solved in a depressing way, and it is very hidden and difficult to find out! Then the solution becomes much simpler:

The Code is as follows:

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

After the code is added, run $ ("# dialog") to test the code. The expected result is finally displayed! The dialog element disappears!