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学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
Vue实现可移动水平时间轴
Jun 29 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 array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python用match()函数爬数据方法详解
2019/07/23 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
初级Java程序员面试题
2016/03/03 面试题
入党申请书自我鉴定
2013/10/12 职场文书
项目总经理岗位职责
2014/02/14 职场文书
体育教师个人工作总结
2015/02/09 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Win11 BitLocker 驱动器加密
2022/04/19 数码科技