Jquery Dialog - 多次添加到 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() 时，我最终会从对话框的第一个实例获取值。)

是否有修复程序可以确保关闭对话框时删除这些字段？或者更好的是，当导航到另一个选项卡时，它们会被正确删除？

编辑

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

Answer 1

使用

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

销毁对话框，然后使用 remove() 从 DOM 中删除 div 及其子元素。

问候。