Диалог jQuery - уникальный диалог дублируется на сайте ajax

Question

У меня есть полностью ajaxed веб-сайт, который использует вызовы $ .get jQuery для извлечения центрального содержимого веб-сайта при щелчках по заголовку. Один из «экранов» (в действительности, представлений использует Zend) имеет скрытый div, который «открывается», когда пользователь нажимает определенную кнопку. Вот что происходит со мной:

1. Я добираюсь до нужного экрана и нажимаю кнопку открытия диалога.
2. Диалог открывается нормально. Закрытие и открытие работает, как и ожидалось.
3. Я перехожу на другой экран (заметьте, это ajax, который просто заменяет основной контент новым контентом - однако скрытый div находится внутри этого контента и заменяется вместе с основным контентом)
4. Я возвращаюсь к предыдущему экрану (все еще ajaxing) и снова нажимаю кнопку открытия диалога. Теперь, внезапно, есть два из этих скрытых div, оба с одинаковым идентификатором (я вижу, что если я делаю console.log ($ ("div # hiddenDiv"). Length);), и они оба порождаются в диалоговой форме - у меня они друг на друга.

Диалоги дублируются столько раз, сколько я повторяю это. Если я перехожу на другой экран, возвращаюсь и снова открываю диалог - я получаю 3 и т. Д.

Я принял много мер предосторожности - я очищаю память при каждом щелчке ajax, устанавливая все переменные, с которыми я больше не имею никакого отношения, в ноль. Я также стараюсь заменять весь контент, а также скрытые элементы div при каждом новом вызове ajax, то есть при переходе экрана. Я проверил и убедился, что функция, которая вызывает диалог, не вызывается более одного раза - она ​​просто дублирует диалог после возврата на экран, который содержит его по умолчанию, и я понятия не имею, почему. Имейте в виду - ни один другой элемент не дублируется. Только этот скрытый элемент, который скоро будет в диалоге.

Также стоит отметить тот факт, что процесс дублирования никогда не начинается, пока я не открою диалоговое окно в первый раз. С этого момента каждая схема ajax [вылет / возврат / открытие диалога] дублирует невидимый div.

Кто-нибудь знает, почему это происходит?

Редактировать: Пример кода:

// This causes the screen change when it detects a hash change
// ... stuff ...
if(window.location.hash){
            ajaxData(newhash);
        }
// ... stuff ...


// This causes the actual change of on-screen content (i.e. this is the ajax call) 
function ajaxData(value) {
// ... stuff ...
$.ajax({
    url: "/siteexample/"+value,
    type: "GET",
    mode: "abort",
    dataType: type,
    success: function(data){
        $("#main_content").html(data); // the hidden div is always inside this "data", so it always gets removed when a new screen loads
        loaderdisplay('hide');
        // Clean Memory
        data = null;
    },
    data: ({ajax : 'Y'})
   });
    // ... stuff ....


// And finally, this is the part that summons the dialog
function summonDialog() {
    console.log("here"); // this shows up only once, so I know this function is not called multiple times.
    var dialogBox = $("div#new_window"); // this is the infamous div
    $(dialogBox).dialog({
        modal: true,
        title: "Some title",
        resizable: false,
        zIndex: 22000,
        width: 800,
        buttons: {
            "Save": function(){
                 // some function, ends with:
                 $(dialogBox).dialog("close"); // destroy doesn't change anything
                 dialogBox = null;
            },
            Cancel: function(){
                $(this).dialog("close"); // destroy doesn't change anything
                dialogBox = null;
            }
        }
    });
}

Итак, последовательность событий:
1. ajaxData к месту, где находится div.
2. ajaxData от него.
3. Назад ajaxData и откройте диалог, все хорошо.
4. ajaxData от него.
5. ajaxData назад и открыть диалог, дублирован.
Прополощите и повторите, с этого момента их обманывают.

Edit2:
Я смог временно взломать это с помощью функции summonDialog:

var dialogBox = $("div#new_window");
            var usableDialog = dialogBox[0];
            $(dialogBox).remove();
            $(usableDialog).dialog({
// ... dialog code as usual ...

Но мне не очень нравится решение. Объяснение Марка имеет смысл, но, поскольку у меня есть много разных скрытых элементов div, которые могут стать диалогами, разбросанными по множеству разных представлений, удаление каждого из них таким образом было бы утомительно, поскольку они, как правило, имеют разные идентификаторы, соответствующие контексту, и удаляют с помощью " Класс ui-dialog-content "(который получают все div'ы после открытия в диалоговом окне) может вызвать некоторые проблемы в других частях сайта, поскольку это слишком общая область.

Answer 1

Я верю, что div, который является диалогом, будет прикреплен и скрыт на теле. Таким образом, когда вы заменяете #main_content html, вы на самом деле не удаляете его. Я бы порекомендовал удалить div и снова включить плагин .dialog при каждой перезагрузке html(data).

Примерно так:

  success: function(data){
        $("#new_window").remove();            
        $("#main_content").html(data); 
        loaderdisplay('hide');
        summonDialog();
  }

И простой способ проверить это просто console.log($("#new_window").length);, когда вы получаете обманщиков.

Answer 2

У меня была точно такая же проблема, диалоговое окно дублировалось даже после

$('.content').html('');

Поэтому я добавил это:

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

Это было решение, упомянутое выше @Marc.1007 *