Question

我有以下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)有关，我尝试声明一个变量，它将保持上下文如下： / p>

var $this = $(this);

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

修改

如果我加上这个：

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

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

Answer 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")");

Answer 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>

JQUERY对话框Uncaught Error：在初始化之前无法调用对话框上的方法

2 个答案: