jquery ui对话框删除< div>关闭后 [英] jquery ui dialog box removes <div> after closing

问题描述

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

如果子div仅被触发，它会打开并显示孩子div的内容可以，但是当我打开[点击对话框的按钮]的父div时，小孩的div内容已经消失了[通过查看它]通过firebug]或者不显示

但是当我触发小孩div的按钮时，对话框打开，内容就可以了。

请帮助我失踪。谢谢。

 < div id =parentDialog> 
< div id =childoneDialog>< / div> 
< div id =childtwoDialog>< / div> 
< / div> 
< input id =buttonParenttype =button/> 
< input id =buttonChildonetype =button/> 
 
 $（＃buttonParent）。点击（$（parentDialog）对话框（open）....）; 
 $（＃buttonChildone）。点击（$（childoneDialog）对话框（open）....）; 
  

解决方案

这里的问题是您的对话框嵌套。 jQuery对话框的工作方式是假定所有对话框必须是排他的。不要嵌套你的对话框，你应该可以。

更新：根据您以下的评论，您可以尝试这样做。这不完美，但它应该做的工作。例如：

 < div id =Dialog1> 
<！ -  dialog1这里的东西 - > 
< div class =formTarget><！ - 在这里动态插入表单 - >< / div> 
<！ - 更多dialog1这里的东西 - > 
< / div> 
 
< div id =Dialog2> 
<！ -  dialog2这里的东西 - > 
< div class =formTarget><！ - 在这里动态插入表单 - >< / div> 
<！ - 更多dialog2的东西在这里 - > 
< / div> 
 
< div id =reusableForm> 
< form><！ -  yourformhere  - >< / form> 
< / div> 
 
< script> 
函数triggerDialog（d）{//注意'd'是要触发的对话框的ID 
 $（'＃reusableForm'）。appendTo（'＃'+ d +'.formTarget' ）; 
 $（''＃'+ d）.dialog（'open'）; 
} 
< / script> 
  

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

 < a href =＃onclick =triggerDialog（'Dialog1'）>点击此处触发Dialog 1&一个> 
< button type =buttononclick =triggerDialog（'Dialog2'）>点击此处触发Dialog 2< / button> 
  

本质上，此代码将表单移动到一个对话框中，或根据正在传递的对话框triggerDialog功能。这不完美，但它应该给你一些对jQuery和DOM操作的选择的感觉。您应该查看的其他一些jQuery方法是：

  $。append（）
 $ .clone（）
 $ .after（）/ $ .before（）
  

查看 http://api.jquery.com/ 获取更多文档。

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

解决方案

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.

这篇关于jquery ui对话框删除< div>关闭后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！