jquery 单击li防止重复加载的实现代码


Posted in Javascript onDecember 24, 2010

因为加载内容比较慢,所以用户可能在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:100%; margin-bottom:20px;} 
#header h1{ font-size:120%; color:#fff;} 
#header h1 span{ font-size:75%} 
#siderbar{ width:240px; margin-left:10px;border:1px solid #ddd; position:absolute; left:0px; top:120px; position:fixed!important; z-index:9999;} 
#siderbar_box{ padding:10px;overflow:auto} 
#siderbar h4{ background:#eee; color:#666; 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 #999; width:98%;} 
#content ul li table td{/* padding:2px 5px;*/ border:1px solid #999;} 
#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",130); // 设置侧边栏的高度 
$(window).resize(function(){setHeight("#siderbar",130)}); //窗口变化时重新设置侧边栏高度 
$.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()<1) //只加载一次内容,防止多次请求加载 
{ 
$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.3water.com/js/jquery_li_click/demo.html
打包下载 http://xiazai.3water.com/201012/yuanma/jquery_li_click.rar
Javascript 相关文章推荐
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue项目中axios使用详解
Feb 07 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 #Javascript
在JavaScript中获取请求的URL参数
Dec 22 #Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 #Javascript
jQuery Clone Bug解决代码
Dec 22 #Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 #Javascript
jquery插件 autoComboBox 下拉框
Dec 22 #Javascript
Jquery截取中文字符串的实现代码
Dec 22 #Javascript
You might like
PHP中的加密功能
2006/10/09 PHP
MYSQL环境变量设置方法
2007/01/15 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php中session使用示例
2014/03/29 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python实现文字版扫雷
2020/04/24 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
iostream与iostream.h的区别
2015/01/16 面试题
家居饰品店创业计划书
2014/01/31 职场文书
保洁员岗位职责
2015/02/04 职场文书
新员工辞职信范文
2015/05/12 职场文书