jQuery UI 对话框不会关闭

Question

在我的网页上，我有一个打开模态 jQuery 对话框的按钮。单击按钮时运行的代码如下：

$('#main-onoffline-container').append('<div id="dialog-modal-a"></div>');

    $("#dialog-modal-a").dialog({
        title:'Add Tags'
        , autoOpen: false
        , modal: true
        , height: 540
        , width:700
        , close: function (ev, ui) { alert('closing'); }
        ,open: function() {
            $("#dialog-modal-a").html('Some html will go here')
        }
    });

    $("#dialog-modal-a").dialog("open");

如你所见，我正在向 DOM 添加一个 div，然后针对新添加的 div 调用对话框方法。

对话框可以正常打开并显示 html 和 X 关闭按钮。但是，当我点击 X 按钮关闭对话框时，它并没有关闭。控制台显示来自 jquery-1.6.4.min.js 的以下错误：

Uncaught RangeError: Maximum call stack size exceeded

谁知道问题出在哪里？

更新： 经过长时间的会话后，我发现某些 js 库的顺序正在影响这一点：

如果我按如下方式包含文件，则会出现问题：

<script src="../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.7.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>

如果我按如下方式包含文件，那么问题就会消失：

<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.7.min.js" type="text/javascript"></script>

这看起来很奇怪 - 我认为您应该在文件顶部包含核心 jQuery 内容？

（验证库是 Jörn Zaefferer 插件）

我提出了一个不同的问题来推进这一点：jQuery library include order causes error

Answer 1

我遇到了类似的错误，.dialog('destroy') 为我解决了问题。可能还是js版本不匹配。

Answer 2

问题是由于 js 库冲突 - 请在主要问题中查看我的最终 cmets

Answer 3

不确定为什么要将对话框附加到页面并立即打开它。我假设您已经遗漏了代码。一般用这个插件你想做的是：

在 HTML 中创建对话框容器：

<div id="dialog-modal-a"></div>

在 $().ready() 上初始化它（autoOpen: false 时默认隐藏它）然后在事件或页面加载时打开它：

$().ready(function() {
    $("#dialog-modal-a").dialog({
        title:'Add Tags',
        autoOpen: false,
        modal: true,
        height: 540,
        width:700,
        close: function (ev, ui) { alert('closing'); }
    });

    $('#somethinkToClick').click(function() {
        $('#dialog-modal-a').html('some html');
        $("#dialog-modal-a").dialog("open");
    });

    /* OR
    $('#somethinkToClick').click(function() {
        $('#dialog-modal-a').html('some html');
        $("#dialog-modal-a").dialog("open");
    });
    */
}

Answer 4

尝试退出$.dialog函数的关闭事件处理：

$( ".selector" ).bind( "dialogclose", function(event, ui) {
  ...
});