我正在 PHP 脚本中构建一个带有选项卡的 jQuery 对话框。该脚本在循环内使用“include”指令，遍历选项卡并包含其他脚本。每个包含的文件都有选项卡的数据和一个带有 jQuery document.ready() 函数的 <script> 标签。没有循环，它基本上是这样做的:
<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>
问题是，在使用
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
造成这种情况的原因是什么？补救这种情况的最佳方法是什么？我试图将每个选项卡的功能保存在单独的文件中，因为它们可以在多种情况下使用，而且我不必复制与它们关联的代码。
感谢任何帮助或建议。
最佳答案
我相信我已经找到原因并创建了一个相当不错的修复程序。当 jQuery 创建对话框时，它将包含对话框内容的 DIV 在 DOM 中四处移动(到文档的最后)，并用对话框所需的必要脚手架围绕该 div(可能通过使用 .append( ) 函数或类似的东西)。因为动态的 DIV 中包含 Javascript，jQuery 在 DIV 重新定位到 DOM 后(即第二次)调用 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>
我感谢在此线程中提供的帮助!
关于php - jQuery 就绪函数在对话框中被调用两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3154458/