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 核心函数以及jQuery对象
Mar 23 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
详解webpack 入门与解析
Apr 09 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
基于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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
python实现名片管理系统
2018/11/29 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
如何一键升级Python所有包
2020/11/05 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
校园活动策划书范文
2014/01/10 职场文书
寒假思想汇报
2014/01/10 职场文书
小学教师听课制度
2014/02/01 职场文书
元旦联欢会感言
2014/03/04 职场文书
材料员岗位职责
2014/03/13 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
中秋节慰问信
2015/02/15 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
Python实现仓库管理系统
2022/05/30 Python