因为加载内容比较慢，所以用户可能在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. jQuery File Upload 插件 php代码分析

    jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据  在进入initialize()中的po ...

  2. Http报文格式学习及Get和Post主要区别总结

    HTTP(HyperText Transport Protocol,超文本传送协议) http请求数据包的格式:头部(request line + header)+  数据(data) 头部和数据包体 ...

  3. SQVI和SAP查询QUERY的区别和使用注意事项

    SQVI.SAP查询QUERY都适用于简单的表连接数据查询,但都不能打包传输到PRD,不同环境需要重复创建.可以生成报表程序供T-CODE调用,用se93指定事务码和程序名称. 区别1-权限: SQV ...

  4. BZOJ 1000 A+B Problem (I/O)

    #include<cstdio> int main(){ int a,b; scanf("%d%d",&a,&b); printf("%d&q ...

  5. java线程学习——汉堡销售问题

    汉堡店中有一个负责做汉堡的厨师,一个负责销售的营业员,用java线程表示他们的营业过程: 问题原型就是生产者与消费者的问题. 首先定义一个汉堡包箱子类与几个相关的变量类: public class H ...

  6. 移动开发语言Swift

    苹果公布了全新的编程语言Swift,Swift继承了Objective-C语言特性,并从Python和Java Script中长处,使Swift更易读.未来swift编程语言的会特大广大的使用 Swi ...

  7. Android实现视频录制

    安卓实现视频录制,有两种方法,一种是调用自带的视频功能,一种是使用MediaRecorder. 每种方法都有自己的优缺点.接下来,把两种方法的代码写出来. 先说第一种方法,也是最简单的方法,那就是直接 ...

  8. Windows最常用的几个网络CMD命令总结

    Windows最常用的几个网络CMD命令总结 http://www.cnblogs.com/sbaicl/archive/2013/03/05/2944001.html 一.ping 主要是测试本机T ...

  9. linux驱动: 如何向模块传递参数, module_param和module_param_array

    如何向模块传递参数,Linux kernel 提供了一个简单的框架.    1.  module_param(name, type, perm); name 既是用户看到的参数名,又是模块内接受参数的 ...

  10. openstack第1天

    入门openstack题外篇 老实说,我在写这篇文章的时候,对云的了解还是比较模糊的,也许是刚接触,不管怎样 总得写点什么,写完之后也许数月之后,感觉写的不是那么好,到时候在做修该吧! 今天我们就提一 ...