变量值未在对话框内更新

Question

我有以下简单的对话框：

function confirmDialog(message, title) {


var returnvalue;

if ($("#confirmDialog").length == 0)
    $('body').append('<div id="confirmDialog"></div>');

var dlg = $("#confirmDialog")
    .html(message)
    .dialog({
        autoOpen: false,
        minHeight: 50,
        title: title,
        show: {
            effect: "explode",
            duration: 250
        },
        hide: {
            effect: "explode",
            duration: 250
        },

        buttons: {
            "OK": {
                text: "OK",
                class: "",
                click: function () { returnvalue = true; $("#confirmDialog").dialog("close"); }
            },

            "Cancel": {
                text: "Cancel",
                class: "",
                click: function () { returnvalue = false; $("#confirmDialog").dialog("close"); }
            }
        },
        modal: true
    });
$('#confirmDialog').dialog("open");
return returnvalue;
}

非常简单的实现。我的问题是，当我运行脚本时，最后，当它返回变量returnvalue 是undefined，这意味着它没有将其设置为true 或false，具体取决于单击了哪个按钮.

我尝试将其设置为var returnvalue = false;，但无论我单击哪个按钮，它都不会获得不同的值。

任何帮助表示赞赏！谢谢！

编辑：

我相信我注意到了为什么没有设置变量。我从另一个对话框的click 事件中调用此对话框，在用户单击父对话框的“保存”按钮后，会弹出此对话框。现在，由于它包含在一个函数中，它不会等待我的输入，也就是说，它不会“看到”我点击了“确定”或“取消”。我该如何解决这个问题？

Answer 1

jQuery 对话框不会像内置的 javascript confirm() 函数那样阻止执行。我可以提出两种可能的解决方案：

1. 将“ok”和“cancel”回调传递给您的confirmDialog 函数。
2. 让您的 confirmDialog 函数返回一个您在单击按钮后解析的 promise 对象，并让调用函数等待它解析。

我更喜欢选项 2。

Answer 2

我会让按钮点击在关闭对话框之前触发一个事件，然后我会在父进程中监听该事件。

• 父对话框打开
• 用户点击保存
• 打开确认对话框
• 用户关闭确认对话框
• 确认对话框触发“ok”或“canceled”事件，具体取决于
• 父对话框正在监听“ok”或“canceled”事件
• 父对话框做出相应反应

确认对话框按钮

buttons: {
            "OK": {
                text: "OK",
                class: "",
                click: function () { $(this).trigger("ok"); $("#confirmDialog").dialog("close"); }
            },

            "Cancel": {
                text: "Cancel",
                class: "",
                click: function () { $(this).trigger("cancel"); $("#confirmDialog").dialog("close"); }
            }
        }

父对话框，或 document.ready()

$("#confirmDialog").on({
    "ok":function(event,ui){ 
      //save work
    },
    "cancel":function(event,ui){
      // cancel work
     }
    },null,null);