JQuery的不工作在阿贾克斯负荷页 [英] JQuery not working in Ajax load page
问题描述
IAM的努力下，php文件，
Iam trying the following, the php file,
//-----------------------------------------------------------------------------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文件加载。如何使这项工作在阿贾克斯？
The php file loads as expected when loaded inside a html form, but with ajax load the toggle function for the table is not working. How do I make this work in ajax?
推荐答案
尝试使用此委托更换你的点击处理程序< /一>处理器连接到父表。
Try replacing your click handler with this delegated handler attached to the table parent.
$("#report").delegate("tr.odd", "click", function() {
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
由于单击事件是由表中捕捉，点击新（更换）的元素会按预期工作，因为事件从的目标元素的到父到的附加处理程序冒泡。该处理程序将执行传递的函数只有在第一个参数中传递的选择抢到 .delegate 元素匹配的目标元素的。
Since the click event is captured by the table, clicking on the new (replaced) elements will work as expected since the event bubbles up from the target element to the parent to which the handler is attached. The handler will execute the passed function only if the element grabbed by the selector passed in the first parameter to .delegate matches the target element.
编辑：jQuery的1.3.2没有 .delegate ，但你可以使用的 .live 来代替：
jQuery 1.3.2 does not have .delegate, but you can use .live instead:
$("#report tr.odd").live("click", function() {
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
要重新申请你的CSS，你可以这样做：
To re-apply your CSS, you can do this:
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的建议：
or get rid of that long ajax method and use $.load as per @Tieson T's suggestion:
$("#changeContent").click"(function() {
$("#myDiv").load("getData.php", function() {
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
});
});
和确保更改按钮，这与上述溶液中使用。
and make sure to change your button to this for use with the above solution.
<button type="button" id="changeContent">Change Content</button>
这篇关于JQuery的不工作在阿贾克斯负荷页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
