返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2020-05-22 17:07:11易采站长站整理

因为加载内容比较慢，所以用户可能在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(){

相关文章 大家在看