快捷導(dǎo)航

jquery 單擊li防止重復(fù)加載的實(shí)現(xiàn)代碼

更新時(shí)間：2010年12月24日 17:31:54 作者：

li在單擊后調(diào)用ajax加載內(nèi)容然后展開(kāi)，li不像button在響應(yīng)了單擊事件后可以設(shè)置為disabled。

因?yàn)榧虞d內(nèi)容比較慢，所以用戶可能在li上不經(jīng)意點(diǎn)擊了兩次，那么就會(huì)請(qǐng)求兩次，這是我們不想看到的。
今天在javascript-jquery群上一筒子發(fā)了兩個(gè)demo給我，他的方法是先將單擊的li節(jié)點(diǎn)拷貝出來(lái)，在加載完后
在重新插回去，顯然不太適合我做的功能。
正一籌莫展，想了一下，何不在li點(diǎn)擊時(shí)加入loading圖片（在ajax加載前），判斷l(xiāng)i節(jié)點(diǎn)上是否存在了img元素，
沒(méi)有則加載ajax內(nèi)容，否則不處理。
測(cè)試了可以通過(guò)，\(^o^)/。

復(fù)制代碼代碼如下:

 
<!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; width:100%; margin-bottom:20px;} 
#header h1{ font-size:120%; color:#fff;} 
#header h1 span{ font-size:75%} 
#siderbar{ width: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; width: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); // 設(shè)置側(cè)邊欄的高度 
$(window).resize(function(){setHeight("#siderbar",130)}); //窗口變化時(shí)重新設(shè)置側(cè)邊欄高度 
$.get("sider.html",function(data){ 
$('#siderbar_box').append(data); 
}); 
/*設(shè)置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去顯示主要內(nèi)容 
}); 

}else{ 
$currentli.siblings().children("ul").slideUp('fast'); 
$currentli.siblings().children("a").removeClass("focus"); 
if($currentli.children("ul").is(":visible")) //處于展開(kāi)狀態(tài) 
{ 

$current.removeClass("focus").parent().children("ul").slideUp('fast'); 
}else{ 

$current.addClass("focus").parent().children("ul").slideDown('slow'); 
showChapter(); 
} 
} 
}); 
//content顯示列表標(biāo)題 
function showChapter(){ 
$.get("chapter.html",function(data){ 
$("#content").html(data); 
$("#content ul li").live("click",function(){ //綁定加載后的標(biāo)題單擊事件 
$current=$(this); 
if($current.children("table").attr("id")==undefined) //單擊標(biāo)題，第一次ajax加載 
{ 
if($current.children("span").find("img").size()<1) //只加載一次內(nèi)容，防止多次請(qǐng)求加載 
{ 
$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 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> 