我正在构建一个带有PHP脚本选项卡的jQuery对话框。该脚本在循环内使用'include'指令，迭代选项卡并包含其他脚本。每个包含的文件都有选项卡的数据和＆lt; script＆gt;标记带有jQuery document.ready（）函数。没有循环，它基本上是这样做的：
<div id="tabDialog">
<div id="tabs">
<ul>
<li><a href="#tab1'>Tab1</a></li>
<li><a href="#tab2'>Tab2</a></li>
</ul>
<div id="tabContainer">
<div id="tab1">
<?php include "tab1.php"; ?>
</div>
<div id="tab2">
<?php include "tab2.php"; ?>
</div>
</div>
</div>
</div>
，例如，tab1.php可能有类似的内容：
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
});
</script>
问题是，在使用＆lt; div id =“dialog”＆gt;创建和打开对话框时作为对话框的DIV，文档的ready函数被第二次调用。这是对话框代码：
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
这是什么原因以及解决这种情况的最佳方法是什么？我试图将每个选项卡的功能保存在单独的文件中，因为它们可以在多种情况下使用，而且我不必复制与它们关联的代码。
感谢您提供任何帮助或建议。
答案 0 :(得分：9)
我相信我找到了原因并创造了一个相当不错的解决方案。当jQuery创建对话框时，它会在DOM中移动包含对话框内容的DIV（到文档的最末端），并使用对话框所需的必要脚手架围绕该div（可能使用.append（ ）功能或类似的东西）。因为动态的DIV包含在其中，所以在DIV重新定位到DOM（即第二次）之后，jQuery正在调用document.ready（）函数。因此，在构建对话框之前，我将.remove（）对话框的DIV中的每个脚本标记都像这样：
$("#tabDialog").find ("script").remove ();
$("#tabDialog").dialog ({
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
});
执行此操作会从最初加载的DIV中删除SCRIPT标记，但SCRIPT本身仍然存在。我还在研究这个因为我并不完全理解动态加载的Javascript代码实际上存在于哪里，但我怀疑它位于DOM之外的某个地方。我在Chrome，Firefox和Exploder 8中对此进行了验证。
我通过在DIV中放置一个按钮并分配.click（）函数，验证了最初包含在已加载的DIV中的所有脚本仍然按预期运行。这是一个小测试，证明了这一点：
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dialogContents" style="display: none;">
<div style="border: 1px solid black; height: 98%;">
<form id="testForm">
<input type="text">
</form>
<button id="testButton">Test</button>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
$("#testButton").click (function () {
alert ('click');
});
});
</script>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready (function () {
//
// Remove all the scripts from any place in the dialog contents. If we
// do not remove the SCRIPT tags, the .ready functions are called a
// second time. Removing this next line of Javascript demonstrates this.
//
$("#dialogContents").find ("script").remove ();
$("#dialogContents").dialog ({
width: 300,
height: 300,
title: 'Testing...'
});
});
</script>
</html>
我感谢人们在这个帖子中提供的帮助！
答案 1 :(得分：1)
我没有太多地使用.dialog()，但您是否需要在脚本中使用jQuery的ready()方法？
看起来.dialog()有可以利用的回调选项。
标签中的脚本：
<script type="text/javascript">
function onOpen() { alert('tab1 loaded') };
</script>
对话框：
$(this).dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
open: function(event, ui) { onOpen(); } // call function in script
}).dialog ('open');
答案 2 :(得分：1)
所以我不得不说我不是百分之百确定它为什么会发生，即使我知道对话框确实存在它自己的状态，所以这可能是其中一个原因。但我可能会离开。但绕过它的方法是使用这样的东西：
$(document).one('ready', function () {
alert ('tab1 loaded');
});
这将确保它只在页面加载时运行一次。
答案 3 :(得分：1)
我也有这个问题，但在我的情况下，原因是不同的。我在div中有一个自动关闭div元素，用作对话框持有者。当我用一个结束标记替换自闭合元素时，文档就绪函数停止触发两次，并且只按预期触发一次。
例如，这导致文档就绪功能触发两次：
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar" />
</div>
虽然这只启动了文档就绪功能一次：
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar"></div>
</div>
答案 4 :(得分：0)
您可能不需要.dialog（'open'）电话;请使用选项autoOpen：true。
答案 5 :(得分：0)
这是页面的结果文本。我做了一个视图源，然后从页面中删除了任何无关的东西，试着让它变得更简单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
<div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
<ul>
<li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
</ul>
<div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
<div id='tab1' class='tabPage ui-dialog-content'>
<form id="tab1Form">
More testing... <input class="keypressMonitor" type="text">
</form>
Testing...<br/>
Testing...<br/>
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
$("#tab1Form").bind ('save', function () {
alert ("in tab1Form.save ()");
});
});
</script>
</div>
<div id='tab2' class='tabPage ui-dialog-content'>
<form id="tab2Form">
<div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
Testing: <input class="keypressMonitor" type="text">
<textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
</div>
</form>
<script type="text/javascript">
$(document).ready (function () {
$("#tab2Form").bind ('save', function () {
alert ("in tab2Form.save ()");
});
});
</script>
</div>
</div>
</div>
<div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
<button class="applyButton" disabled>Apply</button>
<button class="okButton" disabled>Ok</button>
<button class="cancelButton">Cancel</button>
</div>
</div>
<script type="text/javascript">
$(document).ready (function () {
$("#tabs").tabs ();
$("button").button ();
/**
* Pressing the cancel button simply closes the dialog.
*/
$(".cancelButton").click (function () {
$("#tabDialog").dialog ("close");
});
$("#tabDialog").dialog ({
open: function () {
},
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
height: 'auto'
});
});
</script>
</body>
</html>
答案 6 :(得分：0)
将您的脚本放入create方法：
$.dialog({
<your parameters>
create: function() {
<your script>
}
}
使用此方法只会在创建对话框时调用脚本，而不是两次！