gpt4 book ai didi

javascript - jquery 对话框小部件不保留父级

转载 作者:行者123 更新时间:2023-11-28 00:09:45 25 4
gpt4 key购买 nike

这里有一个非常简单的脚本来说明我的观点。我想我只是做错了什么。 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 对话框的默认行为,它将对话框附加在主体的末尾 http://bugs.jqueryui.com/ticket/7948 ,所以我认为这不是您的代码的问题。

目前唯一的解决方法是您在 createopen 事件上正在做什么。

编辑

如果您愿意,也可以看看我的回答:Append jQuery UI dialog to its parent

关于javascript - jquery 对话框小部件不保留父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16065755/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com