javascript - 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") 放入第二个处理程序中来确认这一点。

取而代之的是，只需使用一个唯一标识每个事件的点击目标的选择器即可解决问题。