JQuery Dialog - диалоговые поля добавлены несколько раз в DOM

Я использую пользовательский интерфейс JQuery для отображения вкладок. На одной из вкладок у меня есть диалоговое окно. Если я перейду к этой вкладке, откройте диалоговое окно, закройте его, откройте вкладку и вернитесь назад и откройте диалоговое окно, в результате я получаю несколько и повторяющихся элементов HTML в DOM.

Другими словами...

У меня есть моя основная страница с вкладками:

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

Я обнаружил, что если я открою диалог, отплыв (на другую вкладку) и обратно, то в следующий раз, когда я открою диалоговое окно, в итоге я получу повторяющиеся элементы с именем "someId" в моей DOM. Это вызывает проблемы, потому что когда я пытаюсь захватить значение из someID (например, $( "# someID" ). Val(), я получаю значение из первого экземпляра диалога.)

Есть ли исправление, чтобы убедиться, что поля удалены, когда диалог закрыт? Или еще лучше, что они правильно удаляются при переходе на другую вкладку?

ИЗМЕНИТЬ

В конце концов, я считаю, что проблема связана с использованием вкладок и диалога вместе. Любое поле, которое у меня есть на форме, которая находится за пределами диалогового окна, удаляется из DOM, когда я перемещаюсь с вкладки. Тем не менее, все, что было в диалоговом окне, остается в DOM после моего перехода. Таким образом, когда я перемещаюсь назад, я получаю дубликаты.

ОТВЕТЫ

Ответ 1

Использование

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

Уничтожьте диалоговое окно, а затем удалите div с его дочерними элементами из DOM с помощью remove().

С уважением.

Ответ 2

У меня был аналогичный опыт.
Моя проблема была вызвана всплывающим окном <div> внутри updatepanel.
После вызова ajax создается новый дубликат.
Чтобы решить эту проблему, просто не помещайте всплывающее окно <div> внутри updatepanel.
Вместо этого поставьте updatepanel внутри всплывающего окна <div>.
Надеюсь, что это поможет.

Ответ 3

Вместо $("#dgEvent").dialog(); попробуйте создать диалоговое окно, чтобы оно не открывалось автоматически, затем используйте open и close, чтобы показать/скрыть диалог:

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

Смотрите раздел обзора страницы jQuery UI Dialog, которая ссылается на это сообщение в блоге.

Ответ 4

Кажется, что диалог клонируется пользовательским интерфейсом jQuery и помещается в конец DOM, перед закрытием диалога попробуйте удалить его из DOM

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

который должен исправить вашу проблему.