因为加载内容比较慢，所以用户可能在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. 利用反馈字段给帝国cms添加留言板功能（图文教程）

    帝国cms的插件中提供信息反馈字段,很多人却不会用.这里谢寒教大家如何来给自己的帝国cms网站添加留言板功能 1.找到添加地址 2.添加字段 3.你可以在字段中添加多种字段类型(有文本域,单行文本框, ...

  2. Qt实战之开发CSDN下载助手 （3）（结束篇）

    再次申明下,开发这款助手,主要是用来学习交流,并不是用来开发什么刷积分的软件. 好了,言归正传,这次,主要的分析下CSDN的下载,评论,验证码获取机制等等. 好,回到第二篇,当我们成功登陆时,CSDN ...

  3. Mysql5.6.24 zip解压缩版配置及修改默认编码方法

    win64位下载地址: http://dev.mysql.com/downloads/file.php?id=456319 下载完毕后解压 配置环境变量 在Path后加上mysql解压后bin文件夹所 ...

  4. Airport（未解决。。。）

    Airport Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Sub ...

  5. leetCode 24. Swap Nodes in Pairs (双数交换节点) 解题思路和方法

    Swap Nodes in Pairs  Given a linked list, swap every two adjacent nodes and return its head. For exa ...

  6. Android JNI入门第二篇——Java参数类型与本地参数类型对照

    前面一篇通过简单的例子介绍了android中JNI的使用.这一篇从基础上了解一些Java参数类型与本地参数类型区别. 1)        java中的返回值void和JNI中的void是完全对应的哦! ...

  7. Duplicate entry &#39;97112&#39; for key 1

    1.错误描写叙述 2014-07-08 10:27:13,939 ERROR(com.you.conn.JDBCConnection:104) -com.mysql.jdbc.exceptions.j ...

  8. C - N皇后问题(搜索)

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是,对于给定的N,求出有多少种合 ...

  9. git从github下载代码

    Github作为远程仓库的使用详解  http://blog.csdn.net/djl4104804/article/details/50778717 centos local:        通过g ...

  10. UIAlertView笔记

    链接地址:http://www.cnblogs.com/scandy-yuan/archive/2013/03/11/2954194.html 1. 最简单的用法 UIAlertView*alert ...