javascript - 用 jquery confirm 替换 javascript confirm

Question

我使用以下代码通过 jquery ui 对话框使用默认的 javascript 确认。

jQuery.extend({
    confirm: function(message, title, okAction) {
        jQuery("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
            buttons: {
                "Ok": function() {
                    jQuery(this).dialog("close");
                    return true;
                },
                "Cancel": function() {
                    jQuery(this).dialog("close");
                    return false;
                }
            },
            close: function(event, ui) { jQuery(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
    }
});

jQuery.confirm(
        "LogOut",
        "Do you want to log out",
        function() { 
        });

现在我需要在注销操作中使用相同的代码。这样我就可以替换代码中的 javascript 确认。

<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>

我现在面临的问题是，当我将确认替换为另一个函数并等待其返回值做出决定时，对话框不会将值返回给变量。这两个函数同时执行(它显示警报，但它也被定向到 href 目标)。有什么方法可以使该方法返回真值或假值，从而继续执行 href 目标。

引用:jQuery Extend , jQuery UI Replacement for alert
相关问题:js override confirm

Answer 1

我不知道您是否真的可以这样做，因为 jQuery.dialog 函数是异步的。

您可以使用 promise 库来设置按钮点击事件。但是你不能简单地在 onclick 属性中指定一个方法，而必须通过代码来完成

var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise

jsFiddle

jQuery.extend({
    confirm: function(message, title, okAction) {
        var d = jQuery.Deferred();
        jQuery("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
            buttons: {
                "Ok": function() {
                    jQuery(this).dialog("close");
                    d.resolve(true);
                    return true;
                },
                "Cancel": function() {
                    jQuery(this).dialog("close");
                    d.resolve(false);
                    return false;
                }
            },
            close: function(event, ui) { jQuery(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
        return d.promise();
    }
});

有关 jQuery promise 库的更多信息，请参阅 jQuery reference

编辑:另一种设置方式:jsFiddle