jquery click li to prevent repeated loading implementation code

jquery click li to prevent repeated loading implementation code_jquery

WBOY

Release： 2016-05-16 18:13:33

Original

1210 people have browsed it

Because loading content is slow, the user may inadvertently click twice on the li, which will result in two requests. This is what we don't want to see.
Today, two demos were sent to me in the javascript-jquery group. His method was to copy the clicked li node first, and then
insert it back again after loading, which is obviously not suitable. I made the function.
I was at a loss, so I thought about it, why not add the loading image when li is clicked (before ajax loads), and determine whether the img element exists on the li node.
If not, load the ajax content, otherwise it will not be processed.
The test passed, (^o^)/.

Copy code The code is as follows:

jquery ajax加载绑定事件

<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>