我有一个 HTML 代码:
<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>
当您单击上面的三个链接之一时，将显示相应 div(div#myContainer 的三个直接子级之一)的内容。
但假设 HTML 是从某个 AJAX 调用返回的。所以 click 事件可能不起作用。我记得 AJAX 调用产生的选择器必须使用类似
$(selector).live('click', function(){
// do stuff here
})
不是
$(selector).click()
那么，在这种情况下，当 HTML 代码是由 AJAX 调用而不是静态 HTML 生成时，我应该怎么做才能保持所有行为符合预期？
谢谢
最佳答案
@Leo Lerdorf 下面的代码按预期工作:
// array of links
var listItems = $('#myList li a');
$('a').live('click',function(e){
e.preventDefault();
alert(11);
});
$('a:last').one('click',function(e){
$("#myList").append(
"<a href='#frt'>This is the 4th link</a> "
);
});
尝试仅使用选择器而不是 $(selector).filter (如果可能的话，如果不可能，我们会考虑其他方法:))。
您使用的是哪个 jquery 版本？
你也可以试试这个
$('#myList').delegate("a:first", "click", function () {
alert('elrado');
});
关于jquery - 如何选择从 AJAX 调用渲染的 DOM 对象列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9348097/