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

因为加载内容比较慢，所以用户可能在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.jb51.net/js/jquery_li_click/demo.html
打包下载 http://xiazai.jb51.net/201012/yuanma/jquery_li_click.rar

赞 (0)

相关推荐

  • jQuery+ajax实现鼠标单击修改内容的思路

    现有表格中的一行的代码如下所示: 效果可以看下具体51搜索展示http://www.51bt.cc,结合Xunsearch全文检索技术,可以达到毫秒级的数据搜索 <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorde

  • 使用JQuery和CSS模拟超链接的用户单击事件的实现代码

    使用JQuery和CSS模拟超链接的用户单击事件的实现代码

    在正式开始本文之前,先来简单介绍下HTML的<a>标签:使用<a>标签,我们可以在HTML页面上定义锚(anchor),锚有两种用法: 通过使用 href 属性,创建指向另外一个文档的链接(或超链接) 通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接) 本文的内容与锚的第一种用法有关. 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true&q

  • jQuery 全选/反选以及单击行改变背景色实例

    我先把CSS样式放出来,其实这个可以直接忽略 复制代码 代码如下: body{margin:0;padding:0;font-size:12px;font-family:微软雅黑;} .datagrid{width:100%;} .datagird tr th{background-color:#191970; font-size:14px;} .datagrid tr th, .datagrid tr td{border:1px solid #ccc; border-collapse:coll

  • jQuery实现单击和鼠标感应事件

    1.实现单击事件动态交替 之前我们讲到了toggleClass(),对于单击事件而言,jQuery同样提供了动态交替的toggle()方法,这个方法接受两个参数,两个参数均为监听函数,在click事件中交替使用. 例子:点击事件的动态交互. 复制代码 代码如下: <script type="text/javascript">             $(function() {                 $("#ddd").toggle(     

  • jquery禁用右键单击功能屏蔽F5刷新

    1.禁用右键单击功能 复制代码 代码如下: $(document).ready(function() { $(document).bind("contextmenu",function(e) { alert("sorry! No right-clicking!"); return false; }); }); 2.屏蔽F5刷新 复制代码 代码如下: $(document).ready(function() { $(document).bind("keydo

  • jQuery+ajax实现鼠标单击修改内容的方法

    现有表格中的一行的代码如下所示: <tr> <td><span class="catid">2</span></td> <td>公司介绍</td> <td>内部栏目</td> <td><span class="listorder" title="点击修改">2</span></td> <

  • jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例)  如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • jQuery实现多按钮单击变色

    这个小特效代码很简单,就不多做说明了,直接奉上源码. JQuery代码: 复制代码 代码如下: <script type="text/javascript">         //加载事件         $(function () {             var collection = $(".flag");             $.each(collection, function () {                 $(this).

  • 一款基jquery超炫的动画导航菜单可响应单击事件

    一款基jquery超炫的动画导航菜单可响应单击事件

    今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 源码下载 html代码: <ul> <li><a href="http://www.w2bc.com">First</a></li> <li><a href="http://www.w2bc.com"&g

  • Jquery为单选框checkbox绑定单击click事件

    一.假设有如下一段html代码 复制代码 代码如下: <dd id="1"> <input id="checkbox-518" class="imagezz" name type="checkbox" value="518"> </dd> 选中事件(根据选中情况修改上一层背景): 复制代码 代码如下: var $test_image_check_box_click = f

  • 非jQuery实现照片散落桌子上，单击放大的LightBox效果

    非jQuery实现照片散落桌子上，单击放大的LightBox效果

    效果图如下 Demo地址http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html 实现原理很简单,基本的html如下 复制代码 代码如下: <div id="gallery">             <div class="item">                 <a class="kitLightBox" href="

随机推荐