我正在尝试以下 php 文件，
//-----------------------------------------------------------------------------getData.php-----------------------------------------------------------
<?php
echo '<link rel="stylesheet" href="media/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window.document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
</script> ';
echo '<table id="report">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="5">
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</td>
</tr>
</table> </br> </br>';
?>
和 HTML 文件，
//--------------------------------------------------------------------------------------index.html------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getData.php",true);
xmlhttp.send();
}
</script>
<body>
<form name="input" action="getForumComments.php" method="get">
<input type="submit" value="Submit" />
</form>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
当加载到 html 表单中时，php 文件会按预期加载，但使用 ajax 加载时，表的切换功能不起作用。我如何在 ajax 中使其工作？
最佳答案
尝试用此 delegated 替换您的点击处理程序附加到父表的处理程序。
$("#report").delegate("tr.odd", "click", function() {
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
由于点击事件被表捕获，点击新的(替换的)元素将按预期工作，因为事件从目标元素向上冒泡到处理程序所附加的父元素。仅当传递给 .delegate 第一个参数的选择器抓取的元素与目标元素匹配时，处理程序才会执行传递的函数。
编辑:jQuery 1.3.2 没有 .delegate，但您可以使用 .live相反:
$("#report tr.odd").live("click", function() {
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
要重新应用 CSS，您可以执行以下操作:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
}
或者摆脱那个长ajax方法并按照@Tieson T的建议使用$.load:
$("#changeContent").click"(function() {
$("#myDiv").load("getData.php", function() {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
});
});
并确保将您的按钮更改为此，以便与上述解决方案一起使用。
<button type="button" id="changeContent">Change Content</button>
关于php - JQuery 无法在 Ajax 加载页面中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7117421/