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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
纯原生js实现贪吃蛇游戏
Apr 16 Javascript
AngularJS表单验证功能
Oct 19 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP Array交叉表实现代码
2010/08/05 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jqPlot Option配置对象详解
2009/07/25 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python爬虫可以爬什么
2020/06/16 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
结婚当天新郎保证书
2015/05/08 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL