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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
php 过滤器实现代码
2010/08/09 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python爬取网页信息的示例
2020/09/24 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python编程的核心知识点总结
2021/02/08 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
80后职场人的职业生涯规划
2014/03/08 职场文书
课外小组活动总结
2014/08/27 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2019销售早会主持词
2019/06/27 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技