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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
window.opener用法和用途实例介绍
Aug 19 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
javascript常用方法汇总
Dec 02 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php 显示指定路径下的图片
2009/10/29 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
IE6 fixed的完美解决方案
2011/03/31 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
轻松理解JavaScript之AJAX
2017/03/15 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
Python实现全角半角字符互转的方法
2016/11/28 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
python使用folium库绘制地图点击框
2018/09/21 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
初二物理教学反思
2014/01/29 职场文书
给面试官的感谢信
2014/02/01 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
生产设备维护保养制度
2015/08/06 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers