从 catch 块打开时无法关闭 jQuery UI 对话框

Posted 2023-05-08

【中文标题】从 catch 块打开时无法关闭 jQuery UI 对话框

【英文标题】：Not able to close jQuery UI dialog when opened from a catch block

【发布时间】：2018-04-13 09:02:11

【问题描述】：

我已经构建了一个常见的错误对话框功能，以获得我的对话框的通用外观。我从$.ajaxSetup.error 函数中调用该函数没有问题。我通过对话框上的调用添加了一个按钮。当从ajaxSetup.error 函数调用时，我的按钮将关闭对话框，角落中的 X 将关闭窗口。

如果我尝试从我的 JS 中的 catch 块中调用相同的函数（不是 AJAX 调用），对话框会毫无问题地打开，但是当我单击按钮关闭对话框时，我会收到以下错误：

0x800a138f - javascript 运行时错误：无法获取未定义或空引用的属性“_focusTabbable”

这是生成我的对话框的代码：

function __renderDialogOK(data) 

    // This call renders the div to be displayed within
    // the dialog.
    var divMessage = __renderDialogBase(data);

    $(divMessage).dialog(
        
            width: __getDialogWidth(),
            resizeable: false,
            modal: true,
            hide: true,
            show: true,
            buttons: [
                
                    text: "OK",
                    click: function (e) 
                        e.preventDefault();
                        $(this).dialog("close");
                        return false;
                    
                
            ],
            open: function (e) 
                $(this).parent().find("button:eq(1)").addClass('ui-state-default');
                $(this).parent().find("button:eq(1)").focus();
                $(this).on("keydown", function (event) 
                    if (parseInt(event.keyCode) === 13) 
                        $(this).parent()
                            .find("button:eq(1)").trigger("click");
                        return false;
                    

                    if (event.keyCode == 27) 
                        $(this).parent()
                            .find("button:eq(1)").trigger("click");
                        return false;
                    
                );
            ,
            close: function (e) 
                $(this).off("keydown");
            
        
    );

正如您在我的按钮中看到的，我尝试使用$(this) 关闭对话框。我还尝试使用函数外部的变量（全局）来存储对$(divMessage).dialog( 的调用返回的上下文。

这似乎只发生在 IE11 中，这对我来说很不幸，因为我的客户将其作为他们当前的公司标准。最后是我的问题。

在 JavaScript 中输入 Catch 块时是否会丢失所有上下文？这个问题之前是否已经暴露，我只是没有看到线程？我已经阅读了许多关于此类似错误消息的其他线程，但它们似乎不像我的实例那样具体，其中许多似乎是因为对话框尚未启动。我的是。对话框出现在屏幕上。我只是无法用我的按钮关闭它。

【问题讨论】：

focus 抛出错误 ** $(this).parent().find("button:eq(1)").focus(); ** $(this).off("keydown");

首先感谢@Nisse 的帮助。非常感谢。我把两条线都拿出来了，仍然得到同样的错误。我不确定您为什么提到禁用 keydown 事件以获得焦点。禁用事件是否会导致浏览器重新聚焦？非常感谢任何进一步的帮助，因为我很难过。

@Krishjs 我的道歉我看到了编辑并认为 Nisse 发表了评论。感谢您的帮助。 :-) 对不起。

您可能希望将$(this) 传递给变量以避免函数之间的混淆。示例：var $me = $(this); var $parent = $(this).parent();，然后在 open 的其余代码块中使用 $me 和 $parent。

【参考方案1】：

扩展我的评论，我会检查这个：

        open: function (e) 
            $(this).parent().find("button:eq(1)").addClass('ui-state-default');
            $(this).parent().find("button:eq(1)").focus();
            $(this).on("keydown", function (event) 
                if (parseInt(event.keyCode) === 13) 
                    $(this).parent()
                        .find("button:eq(1)").trigger("click");
                    return false;
                

                if (event.keyCode == 27) 
                    $(this).parent()
                        .find("button:eq(1)").trigger("click");
                    return false;
                
            );
        

在大多数情况下，this 的值取决于函数的调用方式。执行时不能通过赋值来设置，每次调用函数时可能都不一样。 ES5 引入了 bind 方法来设置函数的 this 的值，而不管它是如何被调用的，ES2015 引入了 arrow 函数，它们确实提供了自己的 this 绑定（它仍然是封闭词法上下文的 this 值)。

因此，在open 回调中，$(this) 指的是调用open 的对象。它有点类似于$(e.target)。因此，当我们通过.on() 将函数绑定到keydown 事件时，$(this) 不再是open 回调。它是对keydown 回调的引用。

为避免混淆，您可以做不同的事情。这是我首先要尝试的：

        open: function (e) 
            var $me = $(this);
            var $parent = $(this).parent();
            $parent.find("button:eq(1)").addClass('ui-state-default');
            $parent.find("button:eq(1)").focus();
            $me.on("keydown", function (event) 
                if (parseInt(event.keyCode) === 13) 
                    $parent
                        .find("button:eq(1)").trigger("click");
                    return false;
                

                if (event.keyCode == 27) 
                    $parent
                        .find("button:eq(1)").trigger("click");
                    return false;
                
            );
        

这将有助于保留对正确对象的正确引用。

【讨论】：

曲折，感谢您的帮助。值得赞赏。我曾尝试创建变量来保存我的引用并将它们设置为开放状态。我按照您上面的建议再次尝试了。第一遍使用您在上面放置的代码，但问题是变量 $me 和 $parent 不在任何按钮事件的范围内。接下来，我将这两个变量移到 open 事件之外，并将它们设为类级别变量（这是我之前尝试过的），但仍然存在相同的问题。我觉得这一切都应该奏效，我一定是在做一些愚蠢的事情，但就是想不通。

我们会弄清楚的。我认为需要制作小提琴。

感谢 Twisty。我很抱歉我这么安静。我一直被困在 1 级和 2 级严重性问题中，这些问题让这个问题被搁置了。很抱歉我没有在这个问题上投入更多。我最终会回到它。感谢您的帮助。