Question

以下代码是一个非常简单和完整的JQuery Dialog。一切正常。

问题如js1.js中的标题所述:(见其评论）

它始终尝试通过调用horsedlgcontainer.load('page2.html');来加载页面，从不点击else horsedlg.dialog('open');语句。

请问好吗？非常感谢你！

page1.html ...

<!DOCTYPE html>
<head>
    <link href="Site.css" rel="stylesheet" type="text/css" />
    <link href="jquery-ui-1.8.21.custom.css" rel="Stylesheet" type="text/css" />
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
    <script src="js1.js" type="text/javascript"></script>
</head>
<body>
<div id="horse-link">
    [<a id="horse-link-show-dialog">Click Me</a>]
</div>
<div id="horse-link-dialog-container"></div>
</body>

page2.html ...

<script src="js2.js" type="text/javascript"></script>
<div id="horse-dialog" title="Horse!">
Q: When is a horse not a horse?<br />
A: It depends, when a white horse is not a horse.<br /> 
</div>

js1.js ...

$(document).ready(function () {
    var horselnk = $('#horse-link'),
        horsedlg = $('#horse-dialog'),
        horsedlgcontainer = $('#horse-link-dialog-container'),
        showdlgbtn = $('#horse-link-show-dialog');
    $.ajaxSetup({ cache: false });
    showdlgbtn.click(showHorseDialog);
    function showHorseDialog() {
        if (horsedlg.length==0) 
            horsedlgcontainer.load('page2.html');
        else  //to improve performance, open it again, don't load the same page
            horsedlg.dialog('open'); //Why never come here?!?       
    }
});

js2.js ...

$(document).ready(function () {
    var horsedlg = $('#horse-dialog'),
        horselnk = $('#horse-link');
    horsedlg.dialog({
        modal: true, autoOpen: true, resizable: false, 
        height: 500, width: 350, closeOnEscape: true,
        show: {effect:'puff',percent:150,duration:250},
        hide: {effect:'puff',percent:110,duration:250}
    });
});

Answer 1

您只评估horsedlg = $('#horse-dialog')一次，并且在内容加载之前，因此其.length属性始终为零。

我怀疑在加载对话框内容时，您还会遇到加载辅助JS文件的问题。单个JS文件会更清晰：

$(document).ready(function () {

    var options = {
        modal: true, autoOpen: true, resizable: false, 
        height: 500, width: 350, closeOnEscape: true,
        show: {effect:'puff',percent:150,duration:250},
        hide: {effect:'puff',percent:110,duration:250}                    
    };

    var loaded = $.Deferred();
    $('#horse-link-show-dialog').on('click', function() {
        var state = loaded.state();
        if (state === 'resolved') {
            $('#horse-dialog').dialog('open');
        } else if (state === 'pending') {
            // do nothing
        } else {
            $('#horse-link-dialog-container').load('page2.html')
               .fail(loaded.reject);
               .done(function() {
                    $('#horse-dialog').dialog(options);
                    loaded.resolve();
                });
            });
        }
    });
});

这使用jQuery延迟对象来指示对话框是否已完成加载。

注意：代码未经测试 - jsfiddle不适合测试AJAX。

Answer 2

正如@Alnitak认识到的那样，问题是你正在尝试搜索＃horse-dialog，甚至在dom中元素可用之前......在你的情况下，它将在page2.html加载后可用。

将代码调整为如下所示，您可以取消使用js2.js：

$(document).ready(function () {
        var horsedlgOptions = {
        modal: true, autoOpen: true, resizable: false, 
        height: 500, width: 350, closeOnEscape: true,
        show: {effect:'puff',percent:150,duration:250},
        hide: {effect:'puff',percent:110,duration:250}
    };
    var horselnk = $('#horse-link'),
        horsedlg = $('#horse-dialog'),
        horsedlgcontainer = $('#horse-link-dialog-container'),
        showdlgbtn = $('#horse-link-show-dialog');
    $.ajaxSetup({ cache: false });
    showdlgbtn.click(showHorseDialog);
    function showHorseDialog() {
        if (horsedlg.length==0) 
            horsedlgcontainer.load('page2.html');
                        horsedlg = horsedlgcontainer.find("#horse-dialog");
                        horsedlg.dialog(horsedlgOptions);
        else  //to improve performance, open it again, don't load the same page
            horsedlg.dialog('open'); 
    }
});

Answer 3

变量horsedlg在第一个$(document).ready函数中本地定义 - 因此当执行该代码时，horsedlg.length等于0作为带有{{1}的DOM元素id的{}不存在于页面上。

您无法更改本地定义的变量 - 因此horse-dialog始终等于0.

你可以这样做：

length

关闭后，JQuery Dialog（）无法再次打开

3 个答案: