javascript – jQuery .load()如何防止双击加载双重加载

前端之家收集整理的这篇文章主要介绍了javascript – jQuery .load()如何防止双击加载双重加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我使用jQuery load()函数将一些页面加载到容器中.这是代码

  1. $('div.next a').live('click',function() {
  2. $('.content').load('page/3/ #info','',function(){
  3. //do something
  4. });
  5. return false;
  6. });

一切正常,但问题是当我快速双击div.next链接时,从控制台我看到它加载页面两次因为我快速双击.我甚至可以点击3次,它会加载3次并在控制台中显示如下:

  1. GET http://site/page/3/ 200 OK 270ms
  2. GET http://site/page/3/ 200 OK 260ms

我的问题是如何防止这种双击,并且无论点击多少次都不要再加载目标页面一次.

谢谢.

@H_404_21@
最佳答案@H_404_21@
无论发生什么好的’JavaScript’?为什么你们都试图用纯粹的jQuery来解决这个问题?

  1. var hasBeenClicked = false;
  2. $('div.next a').live('click',function() {
  3. if(!hasBeenClicked){
  4. hasBeenClicked = true;
  5. $('.content').load('page/3/ #info',function(){
  6. //do something
  7. //If you want it clickable AFTER it loads just uncomment the next line
  8. //hasBeenClicked = false;
  9. });
  10. }
  11. return false;
  12. });

作为旁注,永远不要永远不要使用.live().使用.delegate代替:

  1. var hasBeenClicked = false;
  2. $('div.next').delegate('a','click',function(){
  3. //do something
  4. //If you want it clickable AFTER it loads just uncomment the next line
  5. //hasBeenClicked = false;
  6. });
  7. }
  8. return false;
  9. });

为什么? Paul Irish解释说:http://paulirish.com/2010/on-jquery-live/

回答你的评论……

如果您的委托函数嵌套在AJAX调用(.load(),. get()等)中,则可能会发生这种情况. div.next必须在页面上才能工作.如果页面上没有div.next,并且这不是嵌套的,只需执行以下操作:

  1. $('#wrapper').delegate('div.next a',function() {

http://api.jquery.com/delegate/

委托需要选择器作为动态添加元素的父级.然后,委托的第一个参数(在最后一个示例中为div.next a)是在所选元素(#wrapper)中查找的元素.如果包装器没有包裹在任何元件中,那么包装器也可以是主体.

@H_404_21@

猜你在找的jQuery相关文章