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

Question

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

$('div.next a').live('click',function() {

    $('.content').load('page/3/ #info','',function(){
        //do something
    });

return false;

});

一切工作正常，但问题是当我快速双击 div.next 链接时，从控制台我看到它加载页面两次，因为我快速双击了。我什至可以单击 3 次，它将加载 3 次并在控制台中显示，如下所示：

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

我的问题是如何防止此类双击，并且无论单击多少次，都不让加载目标页面一次以上。

谢谢。

Answer 1

优秀的 JavaScript 发生了什么？为什么你们都想用纯 jQuery 来解决这个问题？

var hasBeenClicked = false;

$('div.next a').live('click',function() {

    if(!hasBeenClicked){
        hasBeenClicked = true;
        $('.content').load('page/3/ #info','',function(){
            //do something
            //If you want it clickable AFTER it loads just uncomment the next line
            //hasBeenClicked = false;
        });
    }

    return false;
});

附带说明一下，永远不要永远不要使用.live()。使用 .delegate 代替，例如：

var hasBeenClicked = false;

$('div.next').delegate('a','click',function() {

    if(!hasBeenClicked){
        hasBeenClicked = true;
        $('.content').load('page/3/ #info','',function(){
            //do something
            //If you want it clickable AFTER it loads just uncomment the next line
            //hasBeenClicked = false;
        });
    }

    return false;
});

为什么？ Paul Irish 解释道：http://paulirish.com/2010/on-jquery-live/

回答您的评论...

如果您将委托函数嵌套在 AJAX 调用中（.load()、.get() 等），则可能会发生这种情况。 div.next 必须位于页面上才能正常工作。如果 div.next 不在页面上，并且它不是嵌套的，只需执行以下操作：

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

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

委托需要选择器作为动态添加元素的父元素。然后，委托的第一个参数（上一个示例中的 div.next a）是要在所选元素 (#wrapper) 中查找的元素。如果包装器未包装在任何元素中，则包装器也可以是 body。

Answer 2

您可以尝试使用 jquery one 方法：

$("a.button").one("click", function() {
       $('.content').load('page/3/ #info','',function(){
               //do something
       });
});

Answer 3

您可以使用 die() 取消绑定 click 事件：

$(this).die('click').click(function() { return False; });

或者您可以在单击元素后为其指定 .clicked 类：

$(this).addClass('clicked');

并检查是否执行逻辑时该类存在：

$('div.next a').live('click',function() {
    if (!$(this).is('.clicked')) {
        $(this).addClass('clicked');

        $('.content').load('page/3/ #info','',function(){
            //do something
        });
    }

    return false;
});

Answer 4

将您是否正在等待加载存储在变量中。

(function() {
  var waitingToLoad = false;
  $('div.next a').live('click',function() {

    if (!waitingToLoad) {
      waitingToLoad = true;
      $('.content').load('page/3/ #info','',function(){
          waitingToLoad = false;
          //do something
      });
    }
    return false;
  });

})()