使jquery Dialog在两页之间工作

Question

我有一个对话框设置如下

$("#myDialog").dialog({
     autoOpen: true,
     close: function(event, ui) {
         $("#myDialog-content").html("");
         $(this).dialog("destroy");
     }
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
    ...
    success: function(response) { 
        $("#myDialog-content").html(response);
     }
});

这个工作正常我在同一页面加载和关闭对话框但不能使它在页面之间移动时正常工作。

这是我的页面流程

1. 从源页面（比如PageA）我进行AJAX调用以加载包含对话框div的页面（比如PageB）。
2. 此页面上的链接调用上面的方法来显示对话框。 （第一次运行正常）。
3. 当我点击关闭按钮时。对话框关闭并与firebug我仍然可以看到最后的对话框div与UI类，但处于隐藏状态。
4. 如果我回到源页面（页面A）并重新加载PageB.In firebug，我可以看到两个div - 一个来自JSP，另一个来自第3步。
5. 现在，如果我单击按钮加载对话框 - 它使用hidden来填充新数据，并且永远不会使用由jquery创建的新div。所以我只有空白对话框。

我不确定这是否是jquery Dialog问题或我的页面流程。我可以解决的一个可能的解决方案是使用close函数删除完全删除对话框div但是每次加载PageB加载时都会产生这个div的负担。在这种情况下，还有其他任何方式或我做错了吗？

Answer 1

如果我理解了这种情况，你有两个选择：

1. 如果您以某种方式清除“Page B”的内容，请删除该模式 然后。
2. 如果您没有这样的清洁机制，请 .remove()
上的模态close内容

旁注：我建议不要对.css和.html('Loading...')使用jquery。此外，最好将jquery元素缓存在变量中，例如var dialog = $("#myDialog");