如何选择DOM对象的列表从一个AJAX调用呈现？ [英] How can I select a list of DOM objects render from an AJAX call?
问题描述
我有一个HTML code：
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;风格＆GT;
.selected {
颜色：红色;
}
#myContainer DIV {
边界：1px的固体＃333;
}
＆LT; /风格＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
//链接阵列
VAR时listItems = $（'＃myList上立一'）;
// div的数组包含内容（称为容器）
VAR容器= $（'＃myContainer中＆GT; DIV'）;
//隐藏所有容器
containers.hide（）;
//侦听链接点击事件
listItems.click（功能（E）{
// prevent链接默认动作
即preventDefault（）;
//隐藏所有容器
containers.hide（）;
//表明，有ID喜欢环节的哈希值的容器
containers.filter（this.hash）.show（）;
//所有链接中删除选定的类别
listItems.removeClass（'选择'）;
//这个链接添加选定类
$（本）.addClass（'选择'）;
返回false;
}）过滤器（：第一）点击（）。 //默认情况下，第一个环节是活动
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; UL ID =myList上＆GT;
＆LT;李＆GT;＆LT; A HREF =＃第一个＆gt;这是第一环节和LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃第二个＆gt;这是第二个环节 - LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃第三个＆gt;这是第三个环节 - LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV ID =myContainer中＆GT;
＆LT; DIV ID =第一＆GT; XXX＆LT; / DIV＆GT;
＆LT; DIV ID =第二＆GT; YYY＆LT; / DIV＆GT;
＆LT; DIV ID =第三＆GT; ZZZ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
当你点击三个以上链接，相应的格（的DIV＃myContainer中三通孩子们一个）的内容中的一个将被显示。
但是，让我们说，HTML是从特定的AJAX调用返回。因此，点击事件可能无法正常工作。我记得一个选择源于一个AJAX调用必须使用类似
$（选择）.live（'点击'，函数（）{
//做的东西在这里
}）
不是
$（选择）。点击（）
那么，我该怎么办在这种情况下，让所有的行为按预期的HTML code是由于AJAX调用，而不是静态的HTML？
感谢
$（文件）。就绪（函数（）{
VAR时listItems = $（'＃myList上李一），
容器= $（'＃myContainer中＆GT; DIV'）;
。containers.not（：第一）隐藏（）;
$（'＃myList上李一：第一'）addClass（'选择'）。
$（文件）。在（'点击'，listItems中，功能（五）{
即preventDefault（）;
containers.hide（）过滤器（e.target.hash）.show（）。
。listItems.removeClass（选择）过滤器（e.target）.addClass（'选择'）;
}）;
}）;
如果你不使用jQuery 1.7或以上，下载它，并开始使用最新版本！
I have an HTML code:
<html>
<head>
<style>
.selected {
color: red;
}
#myContainer div {
border: 1px solid #333;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// array of links
var listItems = $('#myList li a');
// array of divs contain content (called containers)
var containers = $('#myContainer > div');
// hide all containers
containers.hide();
// listen for click event on links
listItems.click(function(e){
// prevent link default action
e.preventDefault();
// hide all containers
containers.hide();
// show the container that has id like value of link's hash
containers.filter(this.hash).show();
// remove selected class on all links
listItems.removeClass('selected');
// add selected class on this link
$(this).addClass('selected');
return false;
}).filter(':first').click(); // default the first link is active
});
</script>
</head>
<body>
<ul id="myList">
<li><a href="#first">This is the 1st link</a></li>
<li><a href="#second">This is the 2nd link</a></li>
<li><a href="#third">This is the 3rd link</a></li>
</ul>
<div id="myContainer">
<div id="first">xxx</div>
<div id="second">yyy</div>
<div id="third">zzz</div>
</div>
</body>
</html>
When you click on one of three link above, the content of the corresponding div (one of three direct children of div#myContainer) will be shown.
But let's say that the HTML is returned from an certain AJAX call. So the click event maybe not work. I remember that a selector resulted from an AJAX call must use something like
$(selector).live('click', function(){
// do stuff here
})
not
$(selector).click()
So, what should I do in this case to keep all behaviors as expected when HTML code resulted from an AJAX call, not static HTML?
Thanks
$(document).ready(function(){
var listItems = $('#myList li a'),
containers = $('#myContainer > div');
containers.not(':first').hide();
$('#myList li a:first').addClass('selected');
$(document).on('click', listItems, function(e) {
e.preventDefault();
containers.hide().filter(e.target.hash).show();
listItems.removeClass('selected').filter(e.target).addClass('selected');
});
});
If your not using jQuery 1.7 or above, download it and start using the newest version!
这篇关于如何选择DOM对象的列表从一个AJAX调用呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
