jQuery在Ajax加载页面中不起作用
[英]JQuery not working in Ajax load page
问题描述
Iam trying the following, the php file, 
我尝试以下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>';
?>
and HTML file, 和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>
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. php文件在html表单中加载时按预期加载，但是在用ajax加载时，表的切换功能不起作用。 How do I make this work in ajax? 我如何在Ajax中进行这项工作？
4 个解决方案
解决方案1
3 2012-11-19 09:21:21
使用.live多数民众赞成在需求=>
$("#btnSubmit").live("click", myValidation,submitAction);
解决方案2
3 已采纳 2011-08-19 05:50:24
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");
});
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. 由于click事件被表捕获，因此单击新的（替换的）元素将按预期工作，因为该事件从目标元素冒泡到附加了处理程序的父元素 。 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 . 仅当第一个参数传递给.delegate的选择器抓取的元素与目标元素匹配时，处理程序才会执行传递的函数。
EDIT: jQuery 1.3.2 does not have .delegate , but you can use .live instead: 编辑：jQuery 1.3.2没有.delegate ，但是您可以改用.live ：
$("#report tr.odd").live("click", function() {
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
To re-apply your CSS, you can do this: 要重新应用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();
}
or get rid of that long ajax method and use $.load as per @Tieson T's suggestion: 或摆脱那种冗长的ajax方法，并按照@Tieson T的建议使用$.load .load：
$("#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>
解决方案3
1 2011-08-19 05:50:17
The toogleFunction is wrapped around a document ready, this event is fired by the browser when the document loads. toogleFunction已包装好文档，在加载文档时浏览器将触发此事件。
When doing the Ajax request you are essentially getting a string from the server and changing the content of the div. 执行Ajax请求时，您实际上是从服务器获取一个字符串并更改div的内容。
What you need to do is put the function in you main page and after changing the content of the page attach the function to the click event of the new element. 您需要做的是将函数放在主页中，并在更改页面内容后将函数附加到新元素的click事件上。
Hope this helps. 希望这可以帮助。
解决方案4
0 2011-08-19 06:16:29
So you're using jQuery, but then you write your own loader? 因此，您使用的是jQuery，但是随后您编写了自己的加载器？ Huh. 呵呵。
If you're intent on loading the table via Ajax, just use .load(): 如果您打算通过Ajax加载表，请使用.load（）：
function loadReportTable(){
$('myDiv').load('getData.php');
}
You will also need to use the snippet provided by@karim79 above, as the event handlers for your new content will not be bound correctly with the normal .click() syntax. 您还需要使用上述@ karim79提供的代码段，因为新内容的事件处理程序将无法使用常规的.click()语法正确绑定。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.