因为加载内容比较慢，所以用户可能在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; width:%; margin-bottom:20px;}

#header h1{ font-size:%; color:#fff;}

#header h1 span{ font-size:%}

#siderbar{ width:240px; margin-left:10px;border:1px solid #ddd; position:absolute; left:0px; top:120px; position:fixed!important; z-index:;}

#siderbar_box{ padding:10px;overflow:auto}

#siderbar h4{ background:#eee; color:#; 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 #; width:%;}

#content ul li table td{/* padding:2px 5px;*/ border:1px solid #;}

#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",); // 设置侧边栏的高度

$(window).resize(function(){setHeight("#siderbar",)}); //窗口变化时重新设置侧边栏高度

$.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()<) //只加载一次内容，防止多次请求加载

{

$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

jquery 单击li防止重复加载的实现代码的更多相关文章

  1. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  2. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  3. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  4. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  5. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  6. 基于jQuery会员中心安全修改表单代码

    基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  7. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  8. 基于jQuery果冻式按钮焦点图切换代码

    基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  9. 基于jQuery左侧小图滚动右侧大图显示代码

    今天给大家分享一款 jQuery左侧小图滚动右侧大图显示代码是一款基于jQuery实现的左侧滚动图片点击大图查看效果代码.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari. ...

随机推荐

  1. FPGA知识大梳理（四）FPGA中的复位系统大汇总

    本文整合特权(吴厚航)和coyoo(王敏志)两位大神的博文.我也很推崇这两位大神的书籍,特权的书籍要偏基础一下,大家不要一听我这么说就想买coyoo的.我还是那一句话,做技术就要step by ste ...

  2. freebsd

    #cd /usr/ports/devel/binutils && make install

  3. 在OSX狮子(Lion)上安装MYSQL(Install MySQL on Mac OSX)

    这篇文章简述了在Mac OSX狮子(Lion)上安装MySQL Community Server最新版本v10.6.7的过程. MySQL是最流行的开源数据库管理系统.首先,从MySQL的下载页面上下 ...

  4. android 大小写转换

    private void toUpperCase(byte[] data, int start, int len) { int end = start + len; int dist = 'A' - ...

  5. 宣布发布 Windows Azure ExpressRoute，宣告与 Level 3 建立全新的合作伙伴关系并推出关于其他 Azure 服务令人振奋的更新

     在我们与世界各地的客户和合作伙伴交谈时,总会听到他们说,希望找到一个提供商帮助他们最大限度地发挥内部部署投资的作用并且能够利用云的灵活性.这是我们构建混合云策略和云操作系统愿景的基本原则.本着我 ...

  6. [Windows编程] 使用AttachThreadInput 来捕捉其它窗口的键盘输入

    在一些情况下(比如屏幕软键盘或者输入法程序),自己的窗口没有输入焦点但是想要当前焦点窗口的键盘输入消息,可以使用Win32 API函数AttachThreadInput()来解决这个问题.Attach ...

  7. 解决https无法缓存的问题

    火狐弃用http,转而大力推广https的动作一石激起千层浪,非常多没有安装安全证书的站点使用新版火狐浏览器已经打不开了. 之前我们站点仅仅有涉及须要加密的部分连接为https协议.眼下看来不得不将整 ...

  8. c#个性化安装包

    近来想做一个模仿QQ或猎豹浏览器那样的个性化安装包,NSIS或IS等简单看了一下,比较复杂还不确定能不能实现. 想了一下,可以自己开发一个安装包程序,新建一个windows项目,但不知如何将已开发完成 ...

  9. 总结一下ASP.NET MVC 网站的部署问题

    总结一下ASP.NET MVC 网站的部署问题 近日,准备把MVC建了一个新的测试站点部署到IIS上面,结果没想到出现了一系列的问题和错误,准备记录一下. 第一个问题,就是如何将MVC的站点部署到II ...

  10. Jenkins持续集成相关文章整理

    构建iOS持续集成平台(一)——自动化构建和依赖管理 构建iOS持续集成平台(二)——测试框架 构建iOS持续集成平台(三)——CI服务器与自动化部署 使用Jenkins搭建iOS开发的CI服务器 一 ...