JQuery dialog solution for memory leak problem _jquery

For pages, the dialog in jquery can be effective and easy to use, as long as a few lines of code are bound to achieve pop-up effects.
Code

Copy Code code as follows:

$ (' #dialog '). Dialog ({
Autoopen:false,
width:600,
Buttons: {
"OK": function () {
$ (This). dialog ("Close");
},
"Cancel": function () {
$ (This). dialog ("Close");
}
}
});

In some JS interaction is not much of the General page, there is no problem! But for the interactive, strong, need to dynamically load and release the DOM of the page, it is a tragic thing! Why do you say that? Let's look at the following example:
A simple piece of code, a div is dynamically loaded onto the page, and then the Div with dialog to bind to achieve the purpose of the pop-up! The test element below is the <div id= "test" ></div>.
Code

Copy Code code as follows:

function Testappend () {
$ ("#test"). Append (' <div id= "dialog" ><div id= "Filequeue" ></div> <input type= "file" Name= " Uploadify "id=" uploadify "/> ' +
' <a href= ' javascript:upload (); > Upload </a> ' +
' <a href= ' javascript:$ (#uploadify). Uploadifyclearqueue () "> Cancel upload </a><div>");
$ (' #dialog '). Dialog ({
Autoopen:false,
width:600,
Buttons: {
"OK": function () {
$ (This). dialog ("Close");
},
"Cancel": function () {
$ (This). dialog ("Close");
}
}
});
return false;
}

Next, I need to remove the DOM element, and in general, the normal practice is $ ("#test"). empty (); This simple code is done! Does it work?! When you finish this code, you use $ (' #dialog ') to get the dialog element, the depressing thing happens, now that you get it! Why! Not already empty!
Let's take a look at how this tragedy was created,
Let's focus on the $ (' #dialog '). dialog, and then see how the implementation code for jquery is written, and when we trace the code to the _create method in the dialog class, the reason for the problem is found, look at the following code:

Copy Code code as follows:

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);
}),

Since it also creates a div dynamically, and adds the div to the body, and then removes the elements from the dialog from the <div id=test>, joins the new Div ...
That's why we $ ("#test"). Empty (), but the internal dialog did not work! And there's one of the worst places, and the most likely memory leaks: it dynamically creates a div in the body so that if the form doesn't close, and you're constantly using the Testappend method to dynamically load the DOM without being aware of it, You will create n such a div!.
In fact, this problem is not in the area of how to solve, and hidden deep, it is difficult to find! Then it becomes much simpler to solve after the discovery:

Copy Code code as follows:

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

Now add this paragraph after the code, and then do $ ("#dialog") to test, the expected results finally appeared! The dialog element is gone!