未解决的 JQuery 对话框：错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”答案

【问题标题】：unresolved JQuery Dialog: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'未解决的 JQuery 对话框：错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”
【发布时间】：2016-10-20 09:45:29
【问题描述】：

我有一个对话框（users.html），可以从中加载第二个对话框（user.html）；当我关闭第二个对话框时，我得到了错误。 qualcuso 可以帮助我吗？谢谢！

下面是我简化的两个文件的代码：

文件 users.html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <title>Users...</title>

</head>
<body>
    <div>   
        <div id="div_users" title="Users...">
            <button id="btn_user">User</button>
        </div> 
        <div id="div_users_user" >
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_users').dialog({
        width: 500,
        height: 400,
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            console.log('close Users');
            $('#div_users').dialog('destroy').remove();
        },

        buttons: {
            "Close": function(event, ui) {
                $(this).dialog( "close" );
            }
        }
    });

    $(document).ready(function () {
        $("#btn_user").click(function () {
            console.log("New");
            $('#div_users_user').load('user.html');
        });
    });

</script>
</html>

文件用户html：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <title>User...</title>

</head>
<body>
    <div id="div_add_edit_user" title="New User...">
        <div id="div_user_main">
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_add_edit_user').dialog({
        width: 'auto',
        height: 'auto',
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            $('#div_add_edit_user').dialog('destroy').remove();
        },
        buttons: {
            "Save": function() {
                //TO DO..
                $('#div_add_edit_user').dialog('close');

            },
            "Cancel": function(event, ui) {
                $('#div_add_edit_user').dialog('close');
            }
        }
    });


</script>
</html>

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

您的第二个文件（“user.html”）实际上不是一个完整的页面，而更像是一个 sn-p。因此它不需要再次声明 jquery 和 jqueryui。原来你声明了两次，有冲突。

【讨论】：

不..这不是原因；如果你尝试你会看到它。
好吧，确切地说，在上面的代码中，你有很多错误。标签“元”和“链接”必须关闭。按钮初始化对话框应在此处指定：http://api.jqueryui.com/dialog/#option-buttons。等等。我已经更正了这些错误并删除了 user.html 文件中对 jquery 和 jqueryui 的引用。
ok .. 我确实按照您的建议更正了代码，现在可以正常工作了。能否请您更正最后的几处更改？
查看我的新答案

【解决方案2】：

users.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <title>Users...</title>

</head>
<body>
    <div>   
        <div id="div_users" title="Users...">
            <button id="btn_user">User</button>
        </div> 
        <div id="div_users_user" >
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_users').dialog({
        width: 500,
        height: 400,
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            console.log('close Users');
            $('#div_users').dialog('destroy').remove();
        },

        buttons: {
            "Close": function(event, ui) {
                $(this).dialog( "close" );
            }
        }
    });

    $(document).ready(function () {
        $("#btn_user").click(function () {
            console.log("New");
            $('#div_users_user').load('user.html');
        });
    });

</script>
</html>

user.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">


    <title>User...</title>

</head>
<body>
    <div id="div_add_edit_user" title="New User...">
        <div id="div_user_main">
        </div>
    </div>


</body>
<script type="text/javascript">
    $('#div_add_edit_user').dialog({
        width: 'auto',
        height: 'auto',
        modal: true,
        resizable: true,
        autoOpen: true,
        close: function(event, ui){
            console.log('close');
            //$('#div_add_edit_user').parent.dialog('destroy').remove();
            $(this).dialog('destroy').remove();
        },
        buttons: {
            "Save": function() {
                //TO DO..
                $('#div_add_edit_user').dialog('close');

            },
            "Cancel": function(event, ui) {
                console.log('cancel');
                //$('this').dialog('close');
                $('#div_add_edit_user').dialog('close');
            }
        }
    });


</script>
</html>

【讨论】：

【解决方案3】：

我做的邮政编码。在 Mozilla Firefox 49 中测试。工作原理如下：当第一个对话框打开后页面完全加载时；如果您单击“用户”，则会打开另一个对话框。单击“保存”按钮或“取消”后，第二个对话框正确关闭。开发者工具没有错误。如果我理解正确，这正是所需要的。

users.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>Users...</title>
</head>
<body>
    <div>
        <div id="div_users" title="Users...">
            <button id="btn_user">User</button>
        </div>
        <div id="div_users_user">
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#div_users').dialog({
                width: 500,
                height: 400,
                modal: true,
                resizable: true,
                autoOpen: true,
                buttons: [{
                    text: "Close",
                    click: function () {
                        $('#div_users').dialog("close");
                    }
                }]
            });
            $("#btn_user").click(function () {
                console.log("New");
                $('#div_users_user').load('user.html');
            });
        });
    </script>
</body>
</html>

user.html

<!DOCTYPE html>
<html>
<head>
    <title>User...</title>
</head>
<body>
    <div id="div_add_edit_user" title="New User...">
        <div id="div_user_main">
        </div>
    </div>
    <script type="text/javascript">
            $('#div_add_edit_user').dialog({
                width: 'auto',
                height: 'auto',
                modal: true,
                buttons: [
                   {
                       text: "Save",
                       click: function () {
                           $(this).dialog("close");
                       }
                   },
                   {
                       text: "Cancel",
                       click: function () {
                           $("#div_add_edit_user").dialog("close");
                       }
                   }
                ]
            });
    </script>
</body>
</html>

【讨论】：