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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
jquery each()源代码
Feb 14 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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
windows xp下安装pear
2006/12/02 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
解密Python中的描述符(descriptor)
2015/06/03 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
家长评语大全
2014/01/22 职场文书
开工仪式主持词
2014/03/20 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
作文之亲情600字
2019/09/23 职场文书