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 相关文章推荐
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascript正则表达式总结
Feb 29 Javascript
Vue表单实例代码
Sep 05 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
基于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 fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
Javascript通过控制类名更改样式
2019/05/24 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
wxPython框架类和面板类的使用实例
2014/09/28 Python
构建Python包的五个简单准则简介
2015/06/15 Python
python实现k-means聚类算法
2018/02/23 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python语言异常处理测试过程解析
2020/01/08 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
工程监理应届生求职信
2013/11/09 职场文书
高中生自我评语大全
2014/01/19 职场文书
广告设计应届生求职信
2014/03/01 职场文书
企业委托书范本
2014/09/13 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
车间安全生产管理制度
2015/08/06 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
Java存储没有重复元素的数组
2022/04/29 Java/Android