Проработав эту проблему и получив предыдущий ответ, я обнаружил некоторые важные детали, отсутствующие в ответе. Наиболее важным моментом здесь является то, что хотя .dialog("destroy") восстанавливает div до его состояния перед инициализацией, он НЕ восстанавливает div в своем первоначальном расположении в DOM. (Вопрос BAHDev упоминает, как UI Dialog перемещает div в первую очередь.) Это критически важно для операции Ajax, и это изменение / неизменение местоположения div должно быть разъяснено в документации jQuery (это спасло бы меня много время).
Если Ajaxing только содержимое диалогового div, то это поведение, вероятно, не критично, так как вы можете легко найти и переписать содержимое div независимо от того, где оно находится в DOM. Однако если содержимое вашего диалога Ajaxed встроено вместе с другими объектами, то перемещение элемента div из его исходного местоположения, вероятно, приведет к тому, что в последующем Ajaxing создаст другой элемент div в исходном местоположении, что приведет к нескольким элементам div с одинаковым идентификатором.
Например, я запрашиваю короткий список продуктов и длинный список продуктов за один вызов Ajax. Краткий список переходит на экран, а длинный список - в скрытый диалог. Поскольку списки связаны, имеет смысл захватить их обоих за один вызов Ajax. Поскольку UI Dialog переместил длинный список из контейнера, в который он был добавлен Ajax, и вставил его в конец тела HTML, когда я запрашиваю новый список, я получаю два элемента div с одинаковым идентификатором, каждый из которых содержит свой длинный список - один в контейнере Ajax и один в конце корпуса. Самый правильный способ, который я вижу, чтобы справиться с этим, это сначала полностью уничтожить старый длинный список, прежде чем Ajaxing новый. (Можно также проверить объекты диалогового окна пользовательского интерфейса и переместить длинный список в коде, но это громоздко и может также потерять атрибуты div.)
При тестировании (jQuery 1.4.4, UI 1.8.10) я обнаружил, что .dialog("destroy") на оригинальном div работает точно так же, как .remove() на родительском div UI Dialog. Таким образом, удаляются только div-оболочки UI Dialog, а исходный div остается в своем первоначальном состоянии. Другими словами, каждое из следующего делает одно и то же [примечание: .empty () не оказало заметного эффекта]:
// Three different ways to destroy just the UI Dialog
// (and leave the original div).
$(".ui-dialog:has(#myDialog)").remove();
$("#myDialog").parents(".ui-dialog").remove();
$("#myDialog").dialog("destroy");
Таким образом, лучший способ уничтожить как оболочку UI Dialog, так и оригинальный div выглядит так:
// Remove the old dialog and div to make way for a new one via Ajax.
$("#myDialog").dialog("destroy");
$("#myDialog").remove();
Если вы хотите быть уверены, что уничтожили все копии - в случае, если вы случайно создали слишком много с большим количеством вызовов на .dialog() - вам нужно что-то перед селектором #id, например:
// Remove all old dialogs and divs to make way for a new one via Ajax.
$("div#myDialog").dialog("destroy");
$("div#myDialog").remove();
Вы можете сделать это в одну строку, но менее очевидно, каково ваше намерение:
// Remove all old dialogs and divs to make way for a new one via Ajax.
// This technique is not recommended.
$("div#myDialog").parents(".ui-dialog").andSelf().remove();
Я проверил все это в FF, а некоторые в IE8.