因为加载内容比较慢，所以用户可能在li上不经意点击了两次，那么就会请求两次，这是我们不想看到的。
今天在javascript-jquery群上一筒子发了两个demo给我，他的方法是先将单击的li节点拷贝出来，在加载完后
在重新插回去，显然不太适合我做的功能。
正一筹莫展，想了一下，何不在li点击时加入loading图片（在ajax加载前），判断li节点上是否存在了img元素，
没有则加载ajax内容，否则不处理。
测试了可以通过，(^o^)/。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery ajax加载绑定事件</title> <style> *{ margin:0px; padding:0px;} body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;} #container{ position:relative; overflow:hidden;} #header{ height:100px; line-height:100px; background:#dedede; padding-left:20px; position:absolute; left:0px; top:0px; position:fixed!important; 100%; margin-bottom:20px;} #header h1{ font-size:120%; color:#fff;} #header h1 span{ font-size:75%} #siderbar{ 240px; margin-left:10px;border:1px solid #ddd; position:absolute; left:0px; top:120px; position:fixed!important; z-index:9999;} #siderbar_box{ padding:10px;overflow:auto} #siderbar h4{ background:#eee; color:#666; padding:5px 10px;} #siderbar_box ul{ list-style:none; margin-left:10px;} #content{ padding:120px 0px 0px 260px; overflow:auto;_padding:120px 0px 0px 280px;} #content ul{list-style:none;} #content ul li{ border:1px solid #ddd; cursor:pointer; display:block} #content ul li span{ display:block; padding:5px;} #content ul li table{ margin:5px auto; padding:0px; border-collapse:collapse; border:1px solid #999; 98%;} #content ul li table td{/* padding:2px 5px;*/ border:1px solid #999;} #content_footer{ text-align:center;} .focus{padding:2px 5px; boder:1px solid #aaa; background:#fafafa;} .highlight{color:#fff; background:#0099FF} </style> <script src="jquery-1.3.2.min.js"></script> <script> $(function(){ setHeight("#siderbar",130); // 设置侧边栏的高度 $(window).resize(function(){setHeight("#siderbar",130)}); //窗口变化时重新设置侧边栏高度 $.get("sider.html",function(data){ $('#siderbar_box').append(data); }); /*设置ID的高度*/ function setHeight(id,h){ var windowHeight=$(window).height(); $(id).css({"height":(windowHeight-h)+"px"}); } // 绑定加载后的li的查看 $("#siderbar_box ul li a").live("click",function(){ var $current=$(this); var $currentli=$(this).parent(); if($currentli.children("ul").attr("id")==undefined) //第一次需ajax加载 { $currentli.siblings().children("ul").slideUp('fast'); $currentli.siblings().children("a").removeClass("focus"); $.get("chapter.html",function(data){ $current.addClass("focus").parent().append(data); showChapter(); //在content去显示主要内容 }); }else{ $currentli.siblings().children("ul").slideUp('fast'); $currentli.siblings().children("a").removeClass("focus"); if($currentli.children("ul").is(":visible")) //处于展开状态 { $current.removeClass("focus").parent().children("ul").slideUp('fast'); }else{ $current.addClass("focus").parent().children("ul").slideDown('slow'); showChapter(); } } }); //content显示列表标题 function showChapter(){ $.get("chapter.html",function(data){ $("#content").html(data); $("#content ul li").live("click",function(){ //绑定加载后的标题单击事件 $current=$(this); if($current.children("table").attr("id")==undefined) //单击标题，第一次ajax加载 { if($current.children("span").find("img").size()<1) //只加载一次内容，防止多次请求加载 { $current.children("span").append("<img src='loading.gif' border='none'/>"); //加载图片 $.get("table.html",function(data){ $current.append(data).children("span").addClass("highlight").find("img").remove(); //加载完成移除加载图片 }); } }else{ if($current.children("table").is(":visible")) { $current.children("span").removeClass("highlight").next("table").hide(); }else{ $current.children("span").addClass("highlight").next("table").show(); } } }); }); } }); </script> </head> <body> <div id="container"> <div id="header"><h1>DEMO<span>©copyright by <a href="http://cnblogs.com/tomieric">Tomi-Eric's</a><span></h1></div> <div id="siderbar"> <h4>课程</h4> <div id="siderbar_box"> </div> </div> <div id="content"> <div id="content_footer"></div> </div> </div> </body> </html>
演示地址 http://demo.jb51.net/js/jquery_li_click/demo.html
打包下载 http://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar