Question

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

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

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

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

1 个答案: