回答 JQuery 对话框时 Javascript 未执行答案

【问题标题】：Javascript not executing when answering a JQuery Dialog Box回答 JQuery 对话框时 Javascript 未执行
【发布时间】：2012-12-19 16:02:01
【问题描述】：

我的页面上有一个使用 JQuery Dialog Widget 制作的对话框。我已经设置了两个按钮，使其具有单击页面上不同按钮的功能，这些按钮将触发页面的回发并执行各种操作。当对话框为modal: 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()
    };

【问题讨论】：

这个问题有 5 个赞？我错过了什么吗？

标签： jquery jquery-ui jquery-dialog

【解决方案1】：

Modal 会阻止覆盖层本身及其下方的任何 DOM 事件上的各种事件/和动作。但是常规的函数调用，比如你对:clickButton() 的调用是fine，如果你在该函数的开头放置一个警报，你会看到它到达那里。

您遇到的问题是，您正试图与 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 DEMO

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

【讨论】：

【解决方案2】：

试试close事件：

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

【讨论】：