JQUERY 对话框未捕获错误：无法在初始化之前调用对话框上的方法答案

【问题标题】：JQUERY dialog Uncaught Error: cannot call methods on dialog prior to initializationJQUERY 对话框未捕获错误：无法在初始化之前调用对话框上的方法
【发布时间】：2015-03-05 10:24:36
【问题描述】：

我有以下 javascript 打开一个包含部分视图的 JQUERY 对话框：

html

<div id="dialog" title="Address Finder" style="overflow: hidden;"></div>

javascript

    $(function () {
        $('#dialog').dialog({
            autoOpen: false,                    
            title: 'Address Lookup Tool',
            modal: true,
            show: {
                effect: "fade",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            },                    
            open: function (event, ui) {
                //Load the AddressLookup action which will return 
                // the partial view: _AddressLookup                        
                $(this).load("@Url.Action("AddressLookup")");
            }                    
        });

        $('#addressLookupBtn').click(function () {                    
            $('#dialog').dialog('open');
        });
    });

当我第一次打开页面并单击addressLookupBtn 时，会打开带有局部视图的对话框窗口，然后我将其关闭，但下次我尝试打开它时会得到：

未捕获的错误：无法在初始化之前调用对话框上的方法；试图调用方法'open'

我已经查看了这个错误消息，它似乎与我用来加载局部视图的$(this) 相关，我尝试声明一个变量来保持这样的上下文：

var $this = $(this);

但我不确定这应该去哪里，我尝试将它放在 click 函数和 open 函数中并调用它而不是 $(this) 但它给了我同样的错误。

编辑

如果我添加这个：

$('#addressLookupBtn').click(function () {
            $('#dialog').dialog().dialog('open');
        });

对话框将按预期打开和关闭，但仅在第一次执行淡入淡出效果，之后会弹出和弹出。

【问题讨论】：

试试 $("#dialog").load("@Url.Action("AddressLookup")");在创建对话框之前而不是在打开事件中。
不确定你想要这个去哪里

标签： javascript jquery asp.net-mvc

【解决方案1】：

问题在于，使用 .load ajax 调用，您将替换对话框 DIV 内的所有内容，甚至是 jQuery 添加的内容。

在对话框中添加并清空 DIV，然后调用 .load。

<div id="dialog" title="Address Finder">
    <div style="overflow: hidden;"></div>
</div>

然后是JS：

$('> div', this).load("@Url.Action("AddressLookup")");

【讨论】：

不明白你的意思，你能提供一些代码示例吗？
好了，结果是一样的，同样的错误信息

【解决方案2】：

每次单击按钮时，我都需要初始化一个新对话框，这成功了：

<script type="text/javascript">

$(function () {


    $('#addressLookupBtn').click(function () {
        $('#dialog').dialog({
            autoOpen: false,
            title: 'Address Lookup Tool',
            modal: true,
            width: 700,
            show: {
                effect: "fade",
                duration: 1000
            },
            hide: {
                effect: "fade",
                duration: 1000
            },
            open: function (event, ui) {
                //Load the AddressLookup action which will return
                // the partial view: _AddressLookup
                $(this).load("@Url.Action("AddressLookup")");
            }
        }).dialog('open');
    });
});

</script>

【讨论】：

如果您选择这种方式，请删除 autoOpen: false 和 .dialog('open')，因为它们会做相反的事情