单击时调用两次jQuery对话框模式

Question

所以...我有一个网站 here ...

jQuery对话框正在向 here 发送ajax请求。

到达页面时会自动弹出窗口。请解雇那个。

当您点击此图片时...

与此函数调用相关联...

$(function() {
    $("#compliance").dialog({
        autoOpen: true,
        modal: true,
        width: 750,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "Dismiss": function() {
                $(this).dialog("close");
            }
        }
    });
    $(".dialogify").on("click", function(e) {
        e.preventDefault();
        $("#compliance").html("");
        $("#compliance").dialog("option", "title", "Loading...").dialog("open");
        $("#compliance").load(this.href, function() {
            $(this).dialog("option", "title", $(this).find("h1").text());
            $(this).find("h1").remove();
    });
    });
});

或者这个......

与此功能相关联......

$(function() {
    $("#switch").dialog({
        autoOpen: false,
        modal: true,
        width: 750,
        height: 'auto',
        show: 'fade',
        hide: 'fade',
        position: {my: "center top", at:"center top", of: window },
        buttons: {
            "Dismiss": function() {
                $(this).dialog("close");
            }
        }
    });
    $(".dialogify").on("click", function(e) {
        e.preventDefault();
        $("#switch").html("");
        $("#switch").dialog("option", "title", "Loading...").dialog("open");
        $("#switch").load(this.href, function() {
            $(this).dialog("option", "title", $(this).find("h1").text());
            $(this).find("h1").remove();
    });
    });
});

......一个模态出现了。但似乎有两种模态出现了。不透明的背景比它应该更暗。并且，当你解雇第一个时，还有另一个，因为背景变得更轻。

这是为什么？我每个只有一个函数调用。

Answer 1

好吧，你有两个事件处理程序显示对话框，两者都是由同一个动作触发的（点击任何.dialogify）。所以两个处理程序都试图处理两个 .dialogify元素的点击;单击任何一个会导致出现两个对话框（尽管它们加载相同的内容，因为this.href对每个单击目标都是唯一的）。您可以通过在第一个处理程序中放置alert("a")并在第二个处理程序中放置alert("b")来确认这一点。

而不是这样，只需使用一个唯一标识每个事件的点击目标的选择器，问题就会得到解决。