如何从AJAX调用中选择呈现的DOM对象列表？

我有一个HTML代码：

   .selected { color: red; } #myContainer div { border: 1px solid #333; }    $(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 });    
 
This is the 1st link
 
This is the 2nd link
 
This is the 3rd link
 
 
 
xxx
 
yyy
 
zzz
 
   

当您单击上面三个链接之一时，将显示相应div的内容（div＃myContainer的三个直接子节点之一）。

但是，让我们说HTML是从某个AJAX调用返回的。 所以click事件可能不起作用。 我记得AJAX调用产生的选择器必须使用类似的东西

 $(selector).live('click', function(){ // do stuff here }) 

不

 $(selector).click() 

那么，在这种情况下我应该怎么做才能在HTML代码调用而不是静态HTML时保持所有行为符合预期？

谢谢

Answer 1

下面的@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( "This is the 4th link " ); }); 

而不是$（选择器）.filter尝试只使用选择器（如果可能，如果不是，我们会想到别的东西:)）。

您正在使用Whitch jquery版本吗？

你也可以试试这个

 $('#myList').delegate("a:first", "click", function () { alert('elrado'); }); 

Answer 2

 $(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'); }); });​ 

小提琴

如果您不使用jQuery 1.7或更高版本，请下载并开始使用最新版本！