Javascript Chrome上的jQueryUI.dialog（“关闭”）错误（版本50至61 beta）_Javascript_Jquery_Google Chrome_Jquery Ui_Firefox

Javascript Chrome上的jQueryUI.dialog（“关闭”）错误（版本50至61 beta）

javascript jquery google-chrome jquery-ui firefox

Javascript Chrome上的jQueryUI.dialog（“关闭”）错误（版本50至61 beta）,javascript,jquery,google-chrome,jquery-ui,firefox,Javascript,Jquery,Google Chrome,Jquery Ui,Firefox,将以下代码段另存为foo.html，并使用chrome和firefox打开它，然后按“测试”按钮（这会导致从头开始重新编写整个文档），最后按弹出对话框上的“栏”按钮 <!doctype html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">

将以下代码段另存为foo.html，并使用chrome和firefox打开它，然后按“测试”按钮（这会导致从头开始重新编写整个文档），最后按弹出对话框上的“栏”按钮

<!doctype html>
<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- util service -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"></script> <!-- util service -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <!-- util service -->
        <!-- util service -->
        <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"></script>
        <script>

                    document.open("text/html", "replace");
                    document.write("" +
                        "<!doctype html>" +
                        "<html>" +
                        "<head>" +
                        '   <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">' +
                        "</head>" +
                        "<body>" +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"><' + '/script>' +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"><' + '/script>' +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"><' + '/script>' +
                        '   <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"><' + '/script>' +                   
                        "   <script>" +
                        "       UtilService.foo({" +
                        "         buttons: [" +
                        "            {" +
                        '               text: "bar",' +
                        '               click: function () {' +
                        '                  console.log($(this).data("ui-dialog"));' +
                        '                  $(this).dialog("close");' +
                        '               }' +
                        '            }' +
                        '         ]' +
                        '       });' +
                        "   <" + "/script>" +
                        "<body>" +
                        "</html>"
                    );
                    document.close();
        </script>
    </body>
</html>


打开（“文本/html”、“替换”）；
文件。写（“”）+
"" +
"" +
"" +
'   ' +
"" +
"" +
'   ' +
'   ' +
'   ' +
'   ' +                   
"   " +
“UtilService.foo（{”+
“按钮：[”+
"            {" +
'文本：“栏”+
'单击：函数（）{'+
'console.log（$（this.data（“ui对话框”））；'+
“$（this）.dialog（“close”）；”+
'               }' +
'            }' +
'         ]' +
'       });' +
"   " +
"" +
""
);
document.close（）；

上面的代码段使用了一个名为“dummyUtilService.js”的小型实用程序服务。这项服务非常简单：

if (!window.UtilService)
{
    (function (self, $, undefined) {
        "use strict";

        self.foo = function (config) {
            return $("<div>").dialog(config);
        };
    }(window.UtilService = window.UtilService || {}, jQuery));
}

if（！window.UtilService）
{
（函数（self，$，未定义）{
“严格使用”；
self.foo=函数（配置）{
返回$（“”）。对话框（配置）；
};
}（window.UtilService=window.UtilService | |{}，jQuery））；
}

只要“if（！window.UtilService）”位在附近，在按下“bar”按钮时，chrome/firefox下就会出现当前问题：

Uncaught错误：初始化前无法调用对话框上的方法；试图调用方法“close”
at Function.error(https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:253:9)
在HTMLDEVELENT。(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js:246:16)
在功能上，每个(https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:370:19)
在jQuery.fn.init.each(https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:137:17)
在jQuery.fn.init.$.fn.（匿名函数）[作为对话框](https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js:236:10)
在htmldevelment.click(file:///C:/Users/sido6001/Desktop/foo.html:42:578)
在HTMLButtoneElement。(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js:12443:12)
在HTMLButtonElement.dispatch(https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:5226:27)
在HTMLButtonElement.elemData.handle(https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js:4878:28)

如果我们把“If（！window.UtilService）”注释掉，那么在chrome下一切都正常。Firefox对这两种方式都不在乎——无论“if（！window.UtilService）”是否被注释掉，Firefox下的一切都可以正常工作

为什么“$（this）.data（“ui dialog”）”返回“undefined”，从而导致.dialog（“close”）稍后崩溃？[*]

[*]就我的分析而言.dialog（“close”）崩溃，因为对“$（this）.data（“ui dialog”）的内部调用返回未定义的

更新：我注意到，如果原始代码被调整为包含一个触发文档替换过程的按钮，那么该机制在firefox下开始正常工作，但在chrome中会不断崩溃。考虑到这种变化是多么微妙，我现在已经把脖子后面的头发竖起来了，但它在两个主流浏览器中引发了不同的反应：S

<!doctype html>
<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <button>Test</button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- util service -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"></script> <!-- util service -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <!-- util service -->
        <!-- util service -->
        <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"></script>
        <script>
                $("button").on("click", function() {
                    document.open("text/html", "replace");
                    document.write("" +
                        "<!doctype html>" +
                        "<html>" +
                        "<head>" +
                        '   <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">' +
                        "</head>" +
                        "<body>" +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"><' + '/script>' +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"><' + '/script>' +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"><' + '/script>' +
                        '   <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"><' + '/script>' +                   
                        "   <script>" +
                        "       UtilService.foo({" +
                        "         buttons: [" +
                        "            {" +
                        '               text: "bar",' +
                        '               click: function () {' +
                        '                  console.log($(this).data("ui-dialog"));' +
                        '                  $(this).dialog("close");' +
                        '               }' +
                        '            }' +
                        '         ]' +
                        '       });' +
                        "   <" + "/script>" +
                        "<body>" +
                        "</html>"
                    );
                    document.close();
                });
        </script>
    </body>
</html>


试验
$（“按钮”）。在（“单击”，函数（）{
打开（“文本/html”、“替换”）；
文件。写（“”）+
"" +
"" +
"" +
'   ' +
"" +
"" +
'   ' +
'   ' +
'   ' +
'   ' +                   
"   " +
“UtilService.foo（{”+
“按钮：[”+
"            {" +
'文本：“栏”+
'单击：函数（）{'+
'console.log（$（this.data（“ui对话框”））；'+
“$（this）.dialog（“close”）；”+
'               }' +
'            }' +
'         ]' +
'       });' +
"   " +
"" +
""
);
document.close（）；
});

我看到

$（此）.dialog（“关闭”）但我看不到在任何元素上定义了.dialog（）
。错误只是说您无法关闭尚未创建的对话框对象。好的，我知道尝试了什么。可能需要添加一些登录foo
，以确保其正确执行。可能还想将id
添加到
元素中，并将其与潜在的模糊$（this）进行比较如果您再次通读这篇文章，您会注意到该机制在firefox下运行良好。
<!doctype html>
<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">
    </head>
    <body>
        <button>Test</button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- util service -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"></script> <!-- util service -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <!-- util service -->
        <!-- util service -->
        <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"></script>
        <script>
                $("button").on("click", function() {
                    document.open("text/html", "replace");
                    document.write("" +
                        "<!doctype html>" +
                        "<html>" +
                        "<head>" +
                        '   <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">' +
                        "</head>" +
                        "<body>" +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"><' + '/script>' +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.js"><' + '/script>' +
                        '   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"><' + '/script>' +
                        '   <script src="https://cdn.rawgit.com/dsidirop/082a2c1f9d23c1a8bcf86566289bdce9/raw/76367e47ee2ec82739a183e56f020c112dba16db/dummyUtilService.js"><' + '/script>' +                   
                        "   <script>" +
                        "       UtilService.foo({" +
                        "         buttons: [" +
                        "            {" +
                        '               text: "bar",' +
                        '               click: function () {' +
                        '                  console.log($(this).data("ui-dialog"));' +
                        '                  $(this).dialog("close");' +
                        '               }' +
                        '            }' +
                        '         ]' +
                        '       });' +
                        "   <" + "/script>" +
                        "<body>" +
                        "</html>"
                    );
                    document.close();
                });
        </script>
    </body>
</html>