li在单击后调用ajax加载内容然后展开，li不像button在响应了单击事件后可以设置为disabled。
因为加载内容比较慢，所以用户可能在li上不经意点击了两次，那么就会请求两次，这是我们不想看到的。
今天在javascript-jquery群上一筒子发了两个demo给我，他的方法是先将单击的li节点拷贝出来，在加载完后
在重新插回去，显然不太适合我做的功能。
正一筹莫展，想了一下，何不在li点击时加入loading图片（在ajax加载前），判断li节点上是否存在了img元素，
没有则加载ajax内容，否则不处理。
测试了可以通过，\(^o^)/。
view sourceprint?
| 004 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 005 |
<title>jquery ajax加载绑定事件</title> |
| 007 |
*{ margin:0px; padding:0px;} |
| 008 |
body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;} |
| 009 |
#container{ position:relative; overflow:hidden;} |
| 010 |
#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;} |
| 011 |
#header h1{ font-size:120%; color:#fff;} |
| 012 |
#header h1 span{ font-size:75%} |
| 013 |
#siderbar{ width:240px; margin-left:10px;border:1px solid #ddd; position:absolute; left:0px; top:120px; position:fixed!important; z-index:9999;} |
| 014 |
#siderbar_box{ padding:10px;overflow:auto} |
| 015 |
#siderbar h4{ background:#eee; color:#666; padding:5px 10px;} |
| 016 |
#siderbar_box ul{ list-style:none; margin-left:10px;} |
| 017 |
#content{ padding:120px 0px 0px 260px; overflow:auto;_padding:120px 0px 0px 280px;} |
| 018 |
#content ul{list-style:none;} |
| 019 |
#content ul li{ border:1px solid #ddd; cursor:pointer; display:block} |
| 020 |
#content ul li span{ display:block; padding:5px;} |
| 021 |
#content ul li table{ margin:5px auto; padding:0px; border-collapse:collapse; border:1px solid #999; width:98%;} |
| 022 |
#content ul li table td{/* padding:2px 5px;*/ border:1px solid #999;} |
| 023 |
#content_footer{ text-align:center;} |
| 024 |
.focus{padding:2px 5px; boder:1px solid #aaa; background:#fafafa;} |
| 025 |
.highlight{color:#fff; background:#0099FF} |
| 027 |
<script src="jquery-1.3.2.min.js"></script> |
| 030 |
setHeight("#siderbar",130); // 设置侧边栏的高度 |
| 031 |
$(window).resize(function(){setHeight("#siderbar",130)}); //窗口变化时重新设置侧边栏高度 |
| 032 |
$.get("sider.html",function(data){ |
| 033 |
$('#siderbar_box').append(data); |
| 036 |
function setHeight(id,h){ |
| 037 |
var windowHeight=$(window).height(); |
| 038 |
$(id).css({"height" windowHeight-h)+"px"}); |
| 041 |
$("#siderbar_box ul li a").live("click",function(){ |
| 042 |
var $current=$(this); |
| 043 |
var $currentli=$(this).parent(); |
| 044 |
if($currentli.children("ul").attr("id")==undefined) //第一次需ajax加载 |
| 046 |
$currentli.siblings().children("ul").slideUp('fast'); |
| 047 |
$currentli.siblings().children("a").removeClass("focus"); |
| 048 |
$.get("chapter.html",function(data){ |
| 049 |
$current.addClass("focus").parent().append(data); |
| 050 |
showChapter(); //在content去显示主要内容 |
| 054 |
$currentli.siblings().children("ul").slideUp('fast'); |
| 055 |
$currentli.siblings().children("a").removeClass("focus"); |
| 056 |
if($currentli.children("ul").is(":visible")) //处于展开状态 |
| 059 |
$current.removeClass("focus").parent().children("ul").slideUp('fast'); |
| 062 |
$current.addClass("focus").parent().children("ul").slideDown('slow'); |
| 068 |
function showChapter(){ |
| 069 |
$.get("chapter.html",function(data){ |
| 070 |
$("#content").html(data); |
| 071 |
$("#content ul li").live("click",function(){ //绑定加载后的标题单击事件 |
| 073 |
if($current.children("table").attr("id")==undefined) //单击标题，第一次ajax加载 |
| 075 |
if($current.children("span").find("img").size()<1) //只加载一次内容，防止多次请求加载 |
| 077 |
$current.children("span").append("<img src='loading.gif' border='none'/>"); //加载图片 |
| 078 |
$.get("table.html",function(data){ |
| 079 |
$current.append(data).children("span").addClass("highlight").find("img").remove(); //加载完成移除加载图片 |
| 084 |
if($current.children("table").is(":visible")) |
| 086 |
$current.children("span").removeClass("highlight").next("table").hide(); |
| 090 |
$current.children("span").addClass("highlight").next("table").show(); |
| 105 |
<div id="siderbar_box"> |
| 110 |
<div id="content_footer"></div> |
|
浙公网安备 33010602011771号