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的东西放在文件的顶部？

（验证lib是JörnZaefferer插件）

我提出了另一个问题来推进这项工作：jQuery library include order causes error

Answer 1

问题是由于js库冲突 - 请参阅我在主要问题中的最终评论

Answer 2

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

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

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（'destroy'）为我做了伎俩。可能仍有js版本不匹配。

jQuery UI对话框不会关闭

4 个答案: