Jquery对话框小部件不保留父组件

jquery dialog widget does not preserve parent

本文关键字：保留 组件 对话框 小部 Jquery      更新时间：2023-09-26

下面是一个非常简单的脚本来说明我的观点。我宁愿认为我只是做错了什么。http://jsfiddle.net/9qx2q/2/

HTML 

<form id='myForm'>
    <div class="panelClass"> 
        Here's my jquery panel
    </div>
</form>

和脚本

//when the div is dialog'ed it's relocated to be a child of body?
$('.panelClass').dialog({
    //appendTo : '#myForm', // uncomment to see that this does not move the panel
    create : function(e, ui) {
        //$(this).dialog('widget').appendTo('#myForm'); //uncomment to see that this DOES move the panel
    }
});

输出
<body>
  <form id="myForm"></form>
  <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-
resizable" style="outline: 0px; z-index: 1003; position: absolute; height: auto; width: 300px; top: 235px; left: 104px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-1"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-1" class="ui-dialog-title">&nbsp;</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a></div><div class="panelClass ui-dialog-content ui-widget-content" style="width: auto; min-height: 82px; height: auto;" scrolltop="0" scrollleft="0"> 
            Here's my jquery panel
        </div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div></div>
</body>

您将从上面的示例中看到，表单元素现在是空的，并且在表单之后创建了面板。当.dialog()在面板上被调用时，面板被移动到<body>的末尾。

基本情况是这样的。我在表单中有一个面板。该面板需要在表单内，因为当它弹出时，它将具有需要在表单上维护的输入元素。(有时我们弹出这些面板让用户提交更多信息等)。

虽然我有一个工作的解决方案，即通过更新创建方法，我真的不认为这应该是移动元素在第一....除非…我只是做错了什么。

如有任何建议，不胜感激。

谢谢

根据文档appendTo将被添加到jQuery UI 1.10.0 http://api.jqueryui.com/dialog/#option-appendTo

你所面对的，是jQuery UI对话框的默认行为，它将对话框附加在body的末尾http://bugs.jqueryui.com/ticket/7948，所以我不认为这是你的代码的问题。

现在唯一的解决方法是你现在在create或open事件上做什么。

编辑

如果你想，你也可以看看这个我的答案:附加jQuery UI对话框到它的父

假设您正在使用HTML5，您可以设置form属性将<input>与表单相关联，而无需在<form>标签中添加元素:

<input type="text" form="myForm">
相关文章：