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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
javascript中的with语句学习笔记及用法
Feb 17 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
python中partial()基础用法说明
2018/12/30 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python中id函数运行方式
2020/07/03 Python
Python如何在bool函数中取值
2020/09/21 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
装修五一活动策划案
2014/01/23 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
优秀团员个人总结
2015/02/26 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
尊师重教主题班会
2015/08/14 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫