多页使用 div 抛出未捕获错误：在初始化之前无法调用对话框上的方法；试图调用方法“打开”答案

【问题标题】：Multiple page use div throws Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'多页使用 div 抛出未捕获错误：在初始化之前无法调用对话框上的方法；试图调用方法“打开”
【发布时间】：2017-07-13 07:15:58
【问题描述】：

我在两个单独的页面上使用了这个对话框。 Page1.aspx 和 Page2.aspx。两个页面都使用 div 所在的母版页。 js代码是它自己的文件。 Page1.aspx 上一切正常，但出于某种原因在 Page2.aspx 上，当我单击按钮时会发生这种情况。此外，在 Page2.aspx 上，由于某种未知原因，文本区域出现在页面上（这应该只在单击指定按钮时出现在弹出 div 中），所以发生了一些我无法弄清楚的事情。

错误：

Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
    at Function.error (https://code.jquery.com/jquery-1.12.4.js:253:9)
    at HTMLDivElement.<anonymous> (https://code.jquery.com/ui/1.12.1/jquery-ui.js:246:16)
    at Function.each (https://code.jquery.com/jquery-1.12.4.js:370:19)
    at jQuery.fn.init.each (https://code.jquery.com/jquery-1.12.4.js:137:17)
    at jQuery.fn.init.$.fn.(anonymous function) [as dialog] (https://code.jquery.com/ui/1.12.1/jquery-ui.js:236:10)
    at HTMLAnchorElement.<anonymous> (http://23.97.29.252/webapp/js/CommentModal.js:47:29)
    at HTMLAnchorElement.dispatch (https://code.jquery.com/jquery-1.12.4.js:5226:27)
    at HTMLAnchorElement.elemData.handle (https://code.jquery.com/jquery-1.12.4.js:4878:28)

Div HTML 代码：

<div id="commentDialog" title="Comment">
    <textarea id="commentTextArea" style="resize: none" rows="8" cols="42" disabled="disabled"></textarea>
</div>

JS 代码：

$(document).ready(function ()
{
    $('#commentDialog').dialog({
        'buttons': {
            'Save': {
                id: 'commentSave',
                text: 'Save',
                click: function() {
                    //Save to DB with Web API
                }
            },
            'Edit': {
                id: 'commentEdit',
                text: 'Edit',
                click: function ()
                {
                    $('textarea#commentTextArea').removeAttr("disabled");
                    $('#commentEdit').hide();
                    $('#commentSave').show();
                }
            },
            'Cancel': {
                text: 'Cancel',
                click: function ()
                {
                    $('#commentEdit').show();
                    $('#commentSave').hide();
                    $(this).dialog("close");
                }
            }
        },
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
    });

    $('button#commentSave').hide();

    $('[id^=CommentButton]').click(function (e)
    {
        e.preventDefault();
        $("#commentDialog").dialog("open");
    });

});

【问题讨论】：

你能链接到不起作用的页面吗？你所拥有的似乎工作正常codepen.io/anon/pen/xqKMZR
@MichaelCoker 该网站没有上线，所以我没有给你的链接。我猜这与在您提供的链接并没有真正模仿的两个 aspx 页面之间共享 JS 文件有关。我可以让弹出窗口适用于 Page1.aspx 但不适用于 Page2.aspx。
如果它们是单独的页面，我不明白为什么在两者之间共享它只会影响一页而不影响另一页...但是不知道如果我们可以告诉你什么没看到。我假设您在浏览器控制台中没有任何其他有意义的错误或输出？
@MichaelCoker 我更新了错误以准确反映我所看到的。
在我看来，第一个$('#commentDialog').dialog({ ... });（带有autoOpen、height、width 等）没有被读取，或者存在错误或其他问题。您确定那在页面上并且没有出错吗？假设看起来没问题，如果您将所有内容复制并粘贴到该页面上的浏览器控制台中，然后将 $('[id^=CommentButton]').click(...) 块复制并粘贴到控制台中怎么办？那它会火吗？

标签： javascript jquery html css asp.net

【解决方案1】：

您必须先创建对话框。试试：

$("#commentDialog").dialog().open();

【讨论】：

这样做没有帮助。它会导致 Page1.aspx 上的对话框不起作用，并且在 Page2.aspx 上它是一个损坏的弹出对话框。