jQuery dialog modal being called twice on click

Question

So... I have a site here ...

The jQuery dialog is sending an ajax request to here .

There's an auto-popup when you arrive on the page. Please Dismiss that one.

When you click on this image...

which is associated with this function call...

$(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();
    });
    });
});

Or this one...

which is associated with this function...

$(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();
    });
    });
});

...a modal comes up. But it appears that two modals come up. The opaque background is darker than it should be. And, when you dismiss the first one, there's another one, as the background gets lighter.

Why is this? I only have one function call for each.

Answer 1

Well, you have two event handlers that display the dialog, and both are triggered by the same action (a click on any .dialogify ). So both handlers are attempting to handle a click on both .dialogify elements; clicking on any one causes both dialogs to appear (although they load the same content, as this.href is unique to each click target). You can confirm this by putting an alert("a") inside your first handler and alert("b") inside the second.

Instead of this, simply use a selector that uniquely identifies the click target for each event and the problem will be solved.