jquery-ui - JQuery UI 对话框总是将相同的页面加载到容器元素中？我该如何解决？

Question

我有一个容器和一些根据

<div id="container"></div>

<a href="#" class="action" id="add">Add user</a>

<a href="#" class="action" id="view">View user</a>

请注意，我使用一个独特的容器来加载任何页面。当我点击一个动作时，它会触发一个点击事件

// dialog settings
var settings = {
    add:{
        buttons:{
            "Add user":function() {
                // some action
            }
        },
        open:function(e, ui) {
            $(this).load("/add.xhtml");
        }
    },
    view:{
        buttons:{
            "View user":function() {
                // some action
            }
        },
        open:function(e, ui) {
            $(this).load("/view.xhtml");
        }
    }
};


$(".action").click(
    function(e) {
        e.preventDefault();

        $("#container").dialog(settings[$(this).attr("id")].dialog());
    }
);

Answer 1

我认为你必须以不同的方式处理事情。该对话框在您的添加/查看选项中初始化。因此，javascript 被解析并初始化第一个对话框并忽略第二个对话框，因为实例已经存在。

在其他地方初始化对话框，然后将 html 加载到容器中，然后触发对话框打开。

var dialog = {    
    add: $("#container").load("/add.xhtml"),    
    view: $("#container").load("/view.xhtml")
};

和 .dialog("open") 之后的容器，或者重组您的标记以使其更具可读性，例如：

$("#container").load("/" + $(this).attr("id") + ".xhtml").dialog("open");

Answer 2

如果我根据在每个对话框中插入关闭事件

close:function(e, ui) {
    $(this).dialog("destroy");
}

它工作正常！