因为加载内容比较慢，所以用户可能在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的信号消抖

    上一篇写了一个按键消抖,按键消抖需要一个计数器.可是有些信号是不需要这么负责的,仅仅是抖动而已.于是我在上一篇博文的基础上做了一点修改,于是有了这个信号消抖的程序 module sig_nojitte ...

  2. Protel99 SE快捷键大全

    为了方便观看我们的protel99 se视频教程的朋友,我们在这里发布了protel99 se的所有的键盘的快捷分健大全,希望大家在学习我们的视频教程的时候,可以熟悉以下这些快捷键,因为平时我们用pr ...

  3. 打包mysql、tomcat、jdk为一个软件

    打包mysql.tomcat.jdk为一个软件 博客分类: 成长中的点滴  . 我们在本地开发web应用的时候,直接在IDE里面就可以完成jdk.容器.数据库的配置和集成. 但是如果当我们把应用程序交 ...

  4. Spring Boot普通类调用bean

    1 在Spring Boot可以扫描的包下 假设我们编写的工具类为SpringUtil. 如果我们编写的SpringUtil在Spring Boot可以扫描的包下或者使用@ComponentScan引 ...

  5. Boyer–Moore (BM)字符串搜索算法

    在计算机科学里,Boyer-Moore字符串搜索算法是一种非常高效的字符串搜索算法.它由Bob Boyer和J Strother Moore设计于1977年.此算法仅对搜索目标字符串(关键字)进行预处 ...

  6. Flex 全屏显示方法

    1,修改html-template下的index.template.html文件…增加四行 1</html> 上述文件增加了四行…见我文中有提示 2,Mxml文件: 假如一个button按 ...

  7. 在js中获取query string 以及重写URL的函数

    函数用途:如标题.1. 从URL中解析出參数,2.重写URL中的參数值 例如以下代码所看到的.包括了測试.能够直接copy到浏览器中,输入測试地址:localhost:xxx?a=1&b=2& ...

  8. GridView事件分析

    GridView事件分析 (转) P1默认数据绑定过程 编号 事件名称 作用 E1 DataBinding 数据绑定之前触发,在这个事件之前(第一次生成GridView),GridView不存在行数据 ...

  9. Onvif协议

    ONVIF致力于通过全球性的开放界面标准来推进网络视频在安防市场的应用,这一接口界面标准将确保不同厂商生产的网络视频监控产品具有互通性.2008年11月,论坛正式发布了ONVIF第一版规范ONVIF核 ...

  10. Arrays类学习笔记

    Arrays.asList(arr); 该方法可以把数组变成List集合. String[] arr = {"abc","cc"}; List<Strin ...