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

回答您的评论...

如果您将委托(delegate)函数嵌套在 AJAX 调用中(.load()、.get() 等)，就会发生这种情况。 div.next 必须在页面上才能工作。如果 div.next 不在页面上，也没有嵌套，就这样做:

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

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

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