因为加载内容比较慢，所以用户可能在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. asp.net mvc3 linq实现数据的增、删、改、查、

    asp.net mvc 3 linq实现数据的增.删.改.查. 添加数据 定义一个对象: public class Student { public int id{get; set;} public ...

  2. Ibatis入门基本语法（转） good

    Ibatis入门基本语法 一个项目中在写ibatis中的sql语句时,where user_id in (#user_id_list# ), 运行时总是不行,后来上网查了查,才知道这里不该用#,而应该 ...

  3. 入门Html

    html 超文本标记语言(Hypertext Markup Language),用于描写网页文档的标记语言,最新的版本为5.0.由万维网制定 和更新,其实它本质还是文本文件,只不过需要浏览器来解释显示 ...

  4. POJ 2695 The Pilots Brothers' refrigerator(神奇的规律)

    转载请注明出处:http://blog.csdn.net/a1dark 分析:如果想要将一个“+”翻转成“-”,那么必然会把对应的行和列上的所有点翻转一次.由于一个点翻偶数次就相当于不翻转.所以我需要 ...

  5. the convertion between string and BlobColumn

    It's hard to find some samples about the convertion between string and BlobColumn.AddBlobData. It's ...

  6. Python 基础学习20151201

    L = [ ['Apple','Google','Microsoft'], ['Java','Python','Ruby','PHP'], ['Adam','Bart','Lisa'] ] #打印Ap ...

  7. ASP.NET MVC5 学习笔记-2 Razor

    1. Razor @*注释*@ 你在用 @Request.Browser.Browser, 发送邮件给support@qq.com, 转义@@qq @{ var amounts = new List& ...

  8. 转: RequireJS Optimizer 的使用和配置方法

    RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的JavaScript和CSS 代码使用 UglifyJS 或者 Closure ...

  9. 看看微软代码的水平——Windows Live Writer 完成开源并推出开源分支

    http://www.oschina.net/news/68860/windows-live-writer-opensource

  10. page分页

    首先封装一个分页类 public class Page<T> { /** * 当前页号 */ private int pageNumber; /** * 总条数 */ private in ...