栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jquery 单击li防止重复加载的实现代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jquery 单击li防止重复加载的实现代码

因为加载内容比较慢,所以用户可能在li上不经意点击了两次,那么就会请求两次,这是我们不想看到的。
今天在javascript-jquery群上一筒子发了两个demo给我,他的方法是先将单击的li节点拷贝出来,在加载完后
在重新插回去,显然不太适合我做的功能。
正一筹莫展,想了一下,何不在li点击时加入loading图片(在ajax加载前),判断li节点上是否存在了img元素,
没有则加载ajax内容,否则不处理。
测试了可以通过,(^o^)/。
复制代码 代码如下:




jquery ajax加载绑定事件

*{ 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{ border:1px solid #999;}
#content_footer{ text-align:center;}
.focus{padding:2px 5px; boder:1px solid #aaa; background:#fafafa;}
.highlight{color:#fff; background:#0099FF}






DEMO©copyright by Tomi-Eric's

课程










演示地址 http://demo.jb51.net/js/jquery_li_click/demo.html
打包下载 http://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/114777.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号