gpt4 book ai didi

javascript - JQuery Dialog() 关闭后无法再次打开

转载 作者:行者123 更新时间:2023-11-30 07:26:53 25 4
gpt4 key购买 nike

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

问题如 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}
});
});

最佳答案

你只评估了一次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。

关于javascript - JQuery Dialog() 关闭后无法再次打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11262756/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com