我有一个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 }); xxx yyy zzz
当您单击上面三个链接之一时,将显示相应div的内容(div#myContainer的三个直接子节点之一)。
但是,让我们说HTML是从某个AJAX调用返回的。 所以click
事件可能不起作用。 我记得AJAX调用产生的选择器必须使用类似的东西
$(selector).live('click', function(){ // do stuff here })
不
$(selector).click()
那么,在这种情况下我应该怎么做才能在HTML代码调用而不是静态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( "This is the 4th link " ); });
而不是$(选择器).filter尝试只使用选择器(如果可能,如果不是,我们会想到别的东西:))。
您正在使用Whitch jquery版本吗?
你也可以试试这个
$('#myList').delegate("a:first", "click", function () { alert('elrado'); });
$(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或更高版本,请下载并开始使用最新版本!
需要了解更多jQuery教程分享如何从AJAX调用中选择呈现的DOM对象列表?,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享如何从AJAX调用中选择呈现的DOM对象列表?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/982126.html