jquery ui对话框关闭后删除<div>

Question

我有三个 div，每个都有一个按钮，用于触发我的对话框。当我触发父 div 时，它会显示对话框和其他两个孩子的内容，没有问题。

如果只触发子div，则打开并显示子div的内容就ok了，

但是当我打开[单击对话框按钮]父div时，子div内容消失[通过firebug检查]或不显示，

但是当我触发子 div 的按钮时，对话框打开并且内容正常。

请帮我解决我所缺少的。谢谢。

        <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") .... );

Answer 1

这里的问题是你的对话框嵌套了。 jQuery 对话框的工作方式是它假定所有对话框都必须是独占的。不要嵌套你的对话框，你应该没问题。

更新：根据您在下面的评论，您可以尝试以下方法。它并不完美，但它应该可以完成这项工作。例如：

<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>

在您想要触发弹出窗口的任何链接或按钮上，执行以下操作：

<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>

实质上，此代码将表单移动到一个对话框或另一个对话框中，具体取决于传递给 triggerDialog 函数的内容。它并不完美，但它应该让您对 jQuery 和 DOM 操作的选项有所了解。您应该查看的其他一些 jQuery 方法是：

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

查看http://api.jquery.com/ 了解更多文档。