在执行之前等待链接点击弹出结果

Question

我正在处理一个 ASP.NET MVC 项目，我希望所有具有 data-confirmation 属性的链接在执行前显示一个自定义确认框。
这些链接可以是具有不同data-ajax-success 属性的ajax 链接，例如：

<a data-ajax="true" data-ajax-failure="OnAjaxError" data-ajax-method="POST" data-ajax-success="OnAjaxSuccess(data, "updatePanel")" href="/Controller/Action/2cda26be-e6d9-416b-ae5a-ec85280fb1da"></a>

或者像这样的简单链接：

<a href="/OtherController/OtherAction/3ebdb11e-7994-424c-9818-6c577e56c7af"></a>

因此，我想要一种能够等待弹出结果并使用正确参数继续执行的方法（尤其是 data-ajax-success 和 data-ajax-failure 用于 ajax 链接）。
我认为这看起来像这样：

$(document.body).on('click', 'a[data-confirmation]:not([data-confirmation=""]), *[data-confirmation]:not([data-confirmation=""]) a',
    function (event) {
        //pause the event

        ShowYesNoPopup("My title", "My content",
            function () {
                //continue event
            },
            function () {
                event.preventDefault();
                return false;
            }
        );
    }
);

用ShowYesNoPopup：

function ShowYesNoPopup(title, content, yesCallback, noCallback) {
$("#popupOuterContainer").empty();
$('<div id="popupContainer"></div>').dialog({
    modal: true,
    appendTo: "#popupOuterContainer",
    closeText: '',
    buttons:{
        "yes":{
            text:'Ok',
            click: function() {
                $(this).dialog("close");
                yesCallback();
            }
        },
        "no":{
            text:'Cancel',
            click: function() {
                $(this).dialog("close");
                noCallback();
            }
        }
    },
    create: function (event, ui) {
        $("body").css({ overflow: "hidden !important" })
    },
    beforeClose: function (event, ui) {
        $("body").css({ overflow: '' })
    },
    open: function (event, ui) {
        $(".ui-dialog-title").html(title);
        $(this).html(content);
    }
});
}

我阅读了很多关于这个主题的主题，但找不到适合这种特殊情况的主题。我试图在调用弹出窗口之前阻止传播，但随后无法在弹出窗口ok 按钮上再次调用该事件... 一些答案还说这是不可能的，而 javascript confirm 是实现这一目标的唯一选择。

在这种情况下有办法吗？我错过了什么吗？

非常感谢。

更新

$(document.body).on('click', 'a[data-confirmation]:not([data-confirmation=""]), *[data-confirmation]:not([data-confirmation=""]) a',
function (event) {
    event.preventDefault();

    if (should_do_ajax) {
        func_callback = function() {
            var url = $(this).attr('href');
            var successCallback = $(this).data("ajax-success");
            var failureCallback = $(this).data("ajax-failure");
            $.ajax({
                type: "POST",
                url: url,
                success: //what should I put here ? Because successCallback I retrieved from the link is a string, not a real function I think
                error: //same issue
            });
        }
    } else {
        func_callback = function() {
            link = $(this).attr('href');
            window.location = link;
        }
    }

    ShowYesNoPopup("My title", "My content",
        func_callback,
        function () {
            return false;
        }
    );
}

);

Answer 1

一旦ShowYesNoPopup 函数完成（并且它在调用dialog() 之后立即发生，您的代码将返回到click 事件，除非您调用event.preventDefault() - 您的操作的默认行为将被触发（在您的情况下是触发链接点击，这会导致浏览器更改为该页面）。

您可以从防止默认行为开始，并确保 yesCallback 是模拟此行为的函数（例如 - window.location = $(this).attr('href')）

$(document.body).on('click', 'a[data-confirmation]:not([data-confirmation=""]), *[data-confirmation]:not([data-confirmation=""]) a',
    function (event) {
        event.preventDefault();
        if (should_do_ajax) {
            func_callback = function() {
                $.ajax({
                 ...
                });
            }
        } else {
            func_callback = function() {
                link = $(this).attr('href');
                window.location = link;
            }
        }


        ShowYesNoPopup("My title", "My content",
            func_callback,
            function () {
                return false;
            }
        );
    }
);

您可能应该根据您拥有的data-* 值更改yesCallback 函数的内容（ajax 调用/其他）。