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

Question

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

问题如js1.js标题中所述：（请参阅其注释）

它总是尝试通过调用horsedlgcontainer.load('page2.html');来加载页面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提到的那样，问题是您甚至在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'); 
    }
});

Answer 3

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

您无法更改该本地定义的变量-因此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?!?  
    }     
}

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

问题描述

3 个解决方案

解决方案1
3 已采纳 2012-06-29 13:38:11

解决方案2
3 2012-06-29 13:41:43

解决方案3
2 2012-06-29 13:37:45

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

问题描述

3 个解决方案

解决方案1 3 已采纳 2012-06-29 13:38:11

解决方案2 3 2012-06-29 13:41:43

解决方案3 2 2012-06-29 13:37:45

解决方案1
3 已采纳 2012-06-29 13:38:11

解决方案2
3 2012-06-29 13:41:43

解决方案3
2 2012-06-29 13:37:45