jquery ui dialog box removes <div> after closing

问题

I have three divs, and a buttons for each for my dialog box to trigger. When I trigger the parent div it shows the dialog box and the content of the other two childs with no problem.

If the child div only is triggered, it opens and displays the contents of the child div a ok,

but when I open [click the button for dialog box] the parent div, the child div content is gone [ by checking it through firebug ] or not displayed,

but when i trigger the button for the child div, the dialog box opens and the contents are a ok.

Please help me what I am missing. thanks.

        <div id="parentDialog">
         <div id="childoneDialog"></div>
         <div id="childtwoDialog"></div>
        </div>
    <input id="buttonParent" type="button" />
    <input id="buttonChildone" type="button" />

$("#buttonParent").click( $("parentDialog").dialog.("open") .... );
$("#buttonChildone").click( $("childoneDialog").dialog.("open") .... );

回答1:

The problem here is that you have your dialogs nested. The way jQuery dialog works is that it assumes all dialogs must be exclusive. Do not nest your dialogs, and you should be ok.

Update: based on your comment below, here is what you might try. It's not perfect but it should do the job. For example:

<div id="Dialog1">
    <!-- dialog1 stuff here -->
    <div class="formTarget"><!-- dynamically insert form here --></div>
    <!-- more dialog1 stuff here -->
</div>

<div id="Dialog2">
    <!-- dialog2 stuff here -->
    <div class="formTarget"><!-- dynamically insert form here --></div>
    <!-- more dialog2 stuff here -->
</div>

<div id="reusableForm">
    <form><!--yourformhere--></form>
</div>

<script>
function triggerDialog(d) { // note that 'd' is the ID of the dialog you want to trigger
   $('#reusableForm').appendTo('#'+d+' .formTarget');
   $(''#'+d).dialog('open');
}
</script>

On whatever link or button you have that you want to trigger the popup, do the following:

<a href="#" onclick="triggerDialog('Dialog1')">Click here to trigger Dialog 1</a>
<button type="button" onclick="triggerDialog('Dialog2')">Click here to trigger Dialog 2</button>

In essence, this code moves a form into one Dialog or the other depending on which is being passed to the triggerDialog function. It's not perfect, but it should give you some sense of the options you have with jQuery and DOM manipulation. Some other jQuery methods you should look at are:

$.append()
$.clone()
$.after() / $.before()

Check out http://api.jquery.com/ for plenty more documentation.

来源：https://stackoverflow.com/questions/6849310/jquery-ui-dialog-box-removes-div-after-closing