Javascript在回答JQuery对话框时没有执行

Question

我在我的页面上使用了JQuery Dialog Widget制作的对话框。我已经设置好了两个按钮的功能，它们将点击页面上的不同按钮，从而触发页面回发并执行各种操作。

当对话框为modal:false时，对话框将执行相关的clickButton函数。但是，当我设置 modal:true 时，虽然函数已被调用，但按钮却不会被点击。

我猜想我可能忽略了关于 modal:true 所执行的与按钮相关联的功能的某些内容。

以下是我的javascript代码：

    function displayQuoteToCashMessage() {
        //this is where we do that alert for the QuoteToCash request stuff
        $("#<%=divQuoteToCashAlert.ClientId %>").show();
        $("#<%=divQuoteToCashAlert.ClientId %>").dialog({
            modal: false,
            resizable: false,
            buttons: {
                "Ok": function () {
                    //save confirmations
                    clickButton(true);
                    $(this).dialog("close");
                },
                "No": function() {
                    clickButton(false);
                    $(this).dialog("close");
                }
            }
        });        
    }

    function clickButton(b) {
        //do something with b
        document.getElementById(btnSave).click()
    };

- Beast-a-tron

---

这个问题五个赞？我有什么遗漏吗？ - j08691

Answer 1

Modal可以阻止覆盖层本身和下面的任何DOM事件/操作。但是像您对clickButton（）的常规函数调用是可以的，如果在该函数开头放置一个警报，你会看到它到达了那里。您遇到的问题是，您正在尝试与模态框下方的DOM元素进行交互和点击（这就是被拒绝的原因）。

// It gets here without a problem
function clickButton(b) {

    // But this event here is what *modal* is preventing.
    document.getElementById(btnSave).click();
}

我通常的做法是先关闭对话框，然后执行任何外部脚本（尤其是如果我知道它们尝试触发DOM事件）。这样做，您就不会遇到任何问题。

jsFiddle示例

buttons: {
  "Ok": function () {

     $(this).dialog('close');

     // now wait a 100 ms for it to fully close 
     // this is mainly for the slow browsers, "just in case" really

     setTimeout(function () {
        clickButton(); // now we call your function (knowing the modal is gone)
     }, 100);
   }
}

那个微小的延迟只是为了保险起见，不会被察觉，并且能让你在保持 modal:true 的情况下运行函数。

- Mark Pieszak - Trilon.io

Answer 2

尝试使用“关闭”事件：

请点击查看详情。

var okButtonWasClicked = false;
$( "#<%=divQuoteToCashAlert.ClientId %>" ).dialog({ 
    buttons: {
        "Ok": function () {
            okButtonWasClicked = true;
            $(this).dialog("close");
        },
        "No": function() {
            okButtonWasClicked = false;
            $(this).dialog("close");
        }
    },
    close: function() {
        if(okButtonWasClicked) {
           clickButton(true);
        } else {
            clickButton(false);
        }
});

- Maksym Demidas