附加到后，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 没有像第一次那样移动到 之前的表单之外）

Answer 1

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

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

包装器用于标题栏之类的东西...查看您的源代码，当您调用 .dialog() 时，它会将其包装在另一个容器中

，您需要转到 .parent() 然后移动那个元素:)