jQuery對話框 - 一個獨特的對話框在ajax網站上被複制

Question

我有一個完全ajaxed的網站，它使用jQuery的$ .get調用在頭部點擊時獲取網站的中心內容。 其中一個「屏幕」（實際上，使用Zend的視圖）有一個隱藏的div，當用戶單擊某個按鈕時，它將被「隔離」。這是發生在我身上的事情：

1. 我到達所需的屏幕，然後單擊打開的對話框按鈕。
2. 對話框打開罰款。關閉和重新開放按預期工作。
3. 我轉到另一個屏幕（請注意，這是ajax，它只是用新內容替換主要內容 - 但隱藏的div在此內容中，然後與主要內容一起被替換）
4. 我來了回到上一個屏幕（仍然是ajaxing），然後再次單擊打開的對話框按鈕。現在突然間，有兩個隱藏的div，都有相同的ID（我可以看到，如果我做了一個console.log（$（「div＃hiddenDiv」）。length）;），它們都衍生出來了在對話框中 - 我把它們放在彼此的頂部。

對話框重複次數與我重做此次數一樣多。如果我去另一個屏幕，回來，再次打開對話框 - 我得到3，等等。

我採取了很多預防措施 - 我在每個ajax點擊清空內存，設置所有變量，我無所事事再到null。在每一個新的ajax調用中，我也會小心地替換整個內容，即隱藏的div，即屏幕轉換。我檢查並確保召喚對話的函數不會被多次調用，它只是在返回到默認包含它的屏幕時隱藏對話框，我不知道爲什麼。注意你 - 沒有其他因素被欺騙。只有這個隱藏了即將成爲對話的div。

另外值得注意的是，事實上，在我第一次打開對話框之前，複製過程從未開始。從那一刻起，每個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到股利是位置。
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 ... 

但我不太喜歡的解決方案。馬克的解釋是有道理的，但由於我有許多不同的潛在分支，有可能成爲分散在許多不同視圖中的對話，所以以這種方式去除每一個對象將是單調乏味的，因爲他們傾向於具有不同的與上下文相關的標識並通過「 ui-dialog-content「類（所有div在對話打開後都會得到）可能會在網站的其他部分產生一些問題，因爲它的範圍過於寬泛。

Answer 1

我相信這個對話框的div會被粘貼和隱藏在身體上。因此，當您更換#main_content html時，您並未真正將其刪除。我會建議刪除div並重新啓用每個html(data)重新加載的.dialog插件。

事情是這樣的：

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

簡便的方法來測試，這是簡單地console.log($("#new_window").length);當你愚弄。