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

Question

我已经构建了一个常见的错误对话框功能，以获得我的对话框的通用外观。我从$.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 块时是否会丢失所有上下文？这个问题之前是否已经暴露，我只是没有看到线程？我已经阅读了许多关于此类似错误消息的其他线程，但它们似乎不像我的实例那样具体，其中许多似乎是因为对话框尚未启动。我的是。对话框出现在屏幕上。我只是无法用我的按钮关闭它。

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

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