3

我在该表单中有一个表单和一个 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 trainwreck（根据 Firebug，#stufftoputindialog 并没有</body>像第一次那样移动到表单之外）

4

1 回答 1

4

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

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

包装器用于标题栏之类的东西...查看您的来源，当您调用.dialog()它时将其包装在另一个<div>中，您需要转到该.parent()位置然后移动该元素:)

于 2010-08-20T18:07:01.950 回答