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

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();

销毁对话框,然后从DOM中删除带有子节点的div remove().

问候.

Answer 2

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

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

请参阅jQuery UI 对话框页面的概述部分，该部分引用了此博客文章。