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

Question

我的页面上有一个使用JQuery Dialog Widget创建的对话框.我已经设置了两个按钮,它们具有点击页面上不同按钮的功能,这些按钮将触发页面的回发并执行各种操作.当对话框为模态:false时,对话框将执行相关的clickButton函数,但是,当我设置modal:true时,虽然输入了该函数,但不会单击该按钮.

我想我错过了什么modal:true关于执行与按钮相关的功能.

下面是我的javasript

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

Answer 1

Modal 会阻止覆盖层本身以及其下方的任何 DOM事件上的所有类型的事件/和操作。但是常规函数调用（例如您的：）clickButton()很好，如果您在该函数的开头放置一个警报，您将看到它到达那里。

你遇到的问题是，你正在尝试与click模态下方的 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