jQuery 模式对话框不会因用户输入而停止

Question

我是 jQuery 新手，但已经使用 jqueryUI 对话框小部件成功实现了多个模式对话框。在尝试实现另一个时，模式对话框会打开，但代码会继续执行，而不会停止等待用户输入。使用 jQuery 1.7.1 和 jquery-ui-1.8.16。

以下是对话框“原型”的定义（它是“原型”，因为它不会对满足要求所需的“确定”选择执行操作）：

var $confirm = $('#confirm');
$confirm.dialog(
{
    autoOpen:false,
    width:440,
    modal:true,
    buttons:
    {
        OK: function()
        {
            $( this ).dialog( 'close' );
        },
        Cancel: function()
        {
            $( this ).dialog( 'close' );
        }
    }
});

这是一些打开对话框的测试代码对话框：

[ some javascript that does error checking]
alert('stop1');
$('#confirm').dialog('open');
alert('stop2');
[ more javascript including submitting the form]

发生的情况是显示第一个警报。单击它后，对话框将与第二个警报一起打开，表明该对话框不等待用户输入。第二个警报是模态警报，阻止访问对话框。单击该按钮后，表单就会提交。此序列表明该对话框没有等待用户输入。

我已经查看并查看了其他成功实现的模式对话框，但没有看到可能导致此对话框失败的原因。

Answer 1

该对话框不会等待。相反，您会想以此为基础来决定您想要发生什么。因此，不要包含您可能希望或可能不想在对话框模式之后运行的其他代码，而是将其作为函数的最后一部分。

然后，使用“确定”或“取消”功能，在他们选择“确定”的情况下进行调用以继续工作流程，或者只是隐藏并执行需要通过取消完成的任何取消操作。

简而言之，模式对话框不会暂停 JavaScript 的执行，它只会运行代码以打开模式并继续运行。

Answer 2

你应该使用一个承诺：

function deferredConfirm(message) {

$('<div></div>').html(message).dialog({
    dialogClass: 'confirmDialog',
    buttons:
    [{
        text: buttonText,
        click: function () {
            $(this).dialog("close");
            defer.resolve();
        }
    },
    {
        text: buttonText2,
        click: function () {
            $(this).dialog("close");
            defer.reject();
        }
    }],
    close: function () {
        $(this).remove();
    }
});

    return defer.promise();
}

并调用它：

            deferredConfirm("Oh No!").then(function() {
               //do something if dialog confirmed
            });