javascript - jQuery 对话框 - 一个独特的对话框在 ajax 站点上被复制

Question

我有一个完全使用 ajax 的网站，它使用 jQuery 的 $.get 调用在标题点击时获取网站的中心内容。 其中一个“屏幕”(实际上是使用 Zend 的 View )有一个隐藏的 div，当用户单击某个按钮时，它会被“对话”。这就是发生在我身上的事情:

1. 我到达所需的屏幕，然后单击“打开对话框”按钮。
2. 对话框正常打开。按预期关闭和重新开放工程。
3. 我转到另一个屏幕(请注意，这是 ajax，它只是用新内容替换主要内容 - 然而，隐藏的 div 在此内容中，并与主要内容一起替换)
4. 我回到上一个屏幕(仍然是 Ajax)，然后再次单击“打开对话框”按钮。现在突然间，有两个隐藏的 div，它们都具有相同的 ID(我可以看到，如果我执行 console.log($("div#hiddenDiv").length); )并且它们都被生成以对话形式 - 我将它们放在一起。

只要我重做，对话框就会重复多次。如果我转到另一个屏幕，然后返回并再次打开对话框 - 我得到 3，等等。

我采取了很多预防措施 - 我在每次 ajax 单击时清空内存，将所有与我无关的变量设置为 null。我还注意在每个新的 ajax 调用(即屏幕转换)中替换全部内容，以及隐藏的 div。我检查并确保调用对话框的函数不会被多次调用 - 它只是在返回到默认包含它的屏幕时简单地复制对话框，我不知道为什么。请注意 - 没有其他元素被欺骗。只有这个隐藏的 soon-to-be-dialog div。

另外值得注意的是，在我第一次打开对话框之前，复制过程永远不会开始。从那一刻起，每个 ajax [departure/return/dialog-opening]-scheme 都会欺骗不可见的 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 返回并打开对话框，被骗了。
冲洗并重复，从现在开始他们被骗了。

编辑2:
我能够在 summonDialog 函数中暂时将其破解为修复程序:

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

但我不太喜欢这个解决方案。 Marc 的解释是有道理的，但由于我有许多不同的隐藏 div，它们有可能成为分散在许多不同 View 中的对话框，以这种方式删除每个 div 会很乏味，因为它们往往具有不同的上下文适当的 ID 并通过“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); 当你被骗时。