jQuery对话框-对话框字段多次添加到DOM [英] Jquery Dialog - dialog fields added multiple times to the DOM

问题描述

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

I'm using the Jquery UI to display tabs. In one of the tabs, I have a dialog box. If I navigate to that tab, open the dialog, close it, navigate off the tab then back again and open the dialog, I end up with multiple and duplicate HTML elements in the DOM.

换句话说...

我的主页设置带有标签:

I've got my main page setup with tabs:

<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包含一个对话框:

Tab #2 contains a dialog box:

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

...

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

我发现，如果我打开对话框，请导航至(另一个选项卡)并再次返回，下一次我打开对话框时，我将在DOM中得到重复的元素，它们都被命名为"someId".这会引起问题，因为当我尝试从someID(即$(#someID").val())中获取值时，我最终从对话框的第一个实例中获取了值.)

I've found that if I open the dialog, navigate away (to another tab) and back again, the next time I open up the dialog I'll end up with duplicate elements both named "someId" in my DOM. This causes problems because when I try to grab the value from someID (i.e, $("#someID").val(), I end up getting the value from the first instance of the dialog.)

是否存在确保关闭对话框时删除字段的修补程序?或者更好的是，在导航到另一个选项卡时已将它们正确删除了?

Is there a fix to make sure that the fields are removed when the dialog is closed? Or better yet, that they are removed properly when navigating to another tab?

编辑

最后，我相信问题与将Tabs和Dialog一起使用有关.当我离开选项卡时，对话框外部窗体上我拥有的任何字段都会从DOM中删除.但是，在我离开后，对话框中的所有内容仍保留在DOM中.因此，当我向后浏览时，最终会得到重复.

In the end, I believe the problem is related to the use of Tabs and Dialog together. Any field I have on the form that is outside the dialog gets removed from the DOM when I navigate off the tab. However, anything that was in the dialog remains in the DOM after I navigate away. Thus, when I navigate back, I end up with duplicates.

推荐答案

使用

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

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

Destroy the dialog and then remove the div with it's children from the DOM with remove().

致谢.

这篇关于jQuery对话框-对话框字段多次添加到DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！