Question

我在该表单中有一个表单和一个div，用于jQuery对话框的内容。我的目标是弹出对话框，用户在文本框和textareas中输入一些信息，然后提交表单并将该数据提供给我的代码，但随后可以重新打开对话框（页面）提交后保持不变），输入新数据，并在需要时重新提交表格。

如果我跑：

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

然后：

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

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

为什么将div＃mydialog附加到表单（这是它开始的位置）然后调用.dialog（'open'）会导致这种行为，如何让它在正常后打开将它附加到#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()然后移动那个元素：）

附加到<form> </form>后，jQuery对话框不再有效

1 个答案: