Question

我正在使用Jquery UI来显示标签。在其中一个选项卡中，我有一个对话框。如果我导航到该选项卡，打开对话框，关闭它，导航关闭选项卡然后再返回并打开对话框，我最终在DOM中有多个重复的HTML元素。

换句话说......

我的主页设置有标签：

<div id="groupTabs" style="width:600px; height:600px; display:none">
    <ul>
       <li><a href="tab1.aspx"><span>Info</span></a></li>
       <li><a href="tab2.aspx"><span>Associations</span></a></li>
    </ul>
</div>

选项卡＃2包含一个对话框：

<div id="dgEvent">
    <input id="someId">
</div>

...

$("#dgEvent").dialog();

我发现如果我打开对话框，导航（转到另一个标签页）然后再返回，下次打开对话框时，我最终会在DOM中找到名为“someId”的重复元素。这会导致问题，因为当我尝试从someID中获取值时（即$（“＃someID”）。val（），我最终从对话框的第一个实例获取值。）

是否有修复方法可确保在关闭对话框时删除字段？或者更好的是，当导航到另一个标签时它们被正确删除了？

修改

最后，我认为问题与Tabs和Dialog的使用有关。当我离开选项卡时，我在对话框外的表单上的任何字段都会从DOM中删除。但是，在我离开后，对话框中的任何内容都保留在DOM中。因此，当我向后导航时，我最终会重复。

Answer 1

使用

$('#your-dialog').dialog('destroy').remove();

销毁对话框，然后使用remove()从DOM中删除带有子项的div。

问候。

Answer 2

我有类似的经历我的问题是由<div>内的弹出式updatepanel造成的 ajax来电后，会创建新的副本要解决此问题，请避免将弹出窗口<div>放在updatepanel内相反，将updatepanel放在弹出窗口<div>中希望它有所帮助。

Answer 3

而不是$("#dgEvent").dialog();，尝试创建对话框以使其不会自动打开，然后使用打开和关闭来显示/隐藏对话框：

$("#dgEvent").dialog({ autoOpen: false });
$("#dgEvent").dialog('open');
$("#dgEvent").dialog('close');

请参阅jQuery UI Dialog page的概述部分，其中引用了this blog post。

Answer 4

似乎该对话框正在被jQuery UI克隆并放置在DOM的末尾，在关闭对话框之前尝试将其从DOM中删除

$("#dgEvent").remove();

应解决您的问题。

Jquery对话框 - 多次向DOM添加对话框字段

4 个答案: