附加到 后，jQuery 对话框不再起作用

Question

我有一个表单和该表单中的一个 div，我将其用于 jQuery 对话框的内容。我的目标是弹出对话框，用户在文本框和文本区域中输入一些信息，然后提交表单并使该数据可供我后面的代码使用，然后能够重新打开对话框(页面提交后保持状态)，输入新数据，然后根据需要重新提交表单。

如果我运行:

$('div#mydialog').appendTo($('form#foo'));

然后:

 $('div#mydialog').dialog('open');

显示一个仅包含按钮的对话框，其后面显示的是用户无法访问的 div。 (简而言之，它看起来像是 UI 小部件的集群交互)

为什么将 div#mydialog 附加到表单(这是它开始的地方)然后调用 .dialog('open') 会导致这种行为，以及如何让它正常打开将其附加到 form#foo 以将用户数据发送到服务器？

提前致谢

编辑:由于某种原因，对话框在最初打开后似乎没有被附加。即它被打开/编辑/关闭多次，用户单击“提交”，div 被附加到表单中，然后当我再次尝试对话框('打开')时，Firebug 显示它保持在原来的位置表单 - jQuery 似乎不再尝试移动它，而只是更改其内联样式。有谁知道为什么会这样吗？

编辑2:我不知道我的html/脚本对你有多大帮助，它基本上就是你想象的那样:

    <form id="foo"><! -- some form stuff -->
  <div id="stufftoputindialog" style="display:none;">
    <!-- text boxes/textareas to put in dialog -->
  </div>
</form>

和

    $('#stufftoputindialog').dialog({
            height: 550,
            width: 400,
            modal: true,
            buttons: {
                "OK": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            },
            autoOpen: false
        }

点击编辑按钮:

   $('#stufftoputindialog').dialog('open');

提交表单时:

$('#stufftoputindialog').appendTo('form#foo');

然后再次单击编辑按钮，

$('#stufftoputindialog').dialog('open');

导致 UI 崩溃(根据 Firebug，#stufftoputindialog 没有像第一次那样移动到 </body> 之前的表单之外)

Answer 1

它位于您也需要移动的容器中，请执行以下操作:

$('div#mydialog').parent().appendTo('form#foo');

包装器用于标题栏之类的东西...当您调用 .dialog() 时，请查看您的源代码它把它包裹在另一个<div>中，您需要转到 .parent() 然后移动那个元素:)