1

以下代码是一个非常简单且完整的 JQuery 对话框。一切正常。

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

它总是尝试通过调用horsedlgcontainer.load('page2.html');never hits 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}
    });
});
4

3 回答 3

3

您只评估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。

于 2012-06-29T13:38:11.793 回答
3

正如@Alnitak 所提到的，问题是您甚至在元素在dom 中可用之前就尝试搜索#horse-dialog。在您的情况下，它将在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'); 
    }
});
于 2012-06-29T13:41:43.540 回答
2

该变量是在第一个函数horsedlg中本地定义的- 因此，当执行该代码时，该代码等于页面上不存在的DOM 元素。$(document).readyhorsedlg.length0idhorse-dialog

您无法更改该本地定义的变量 - 因此length始终等于 0。

你可以这样做：

function showHorseDialog() {
    var horsedlg = $('#horse-dialog');
    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?!?  
    }     
}
于 2012-06-29T13:37:45.600 回答