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;
});

为什么？保罗·爱尔兰解释道：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如果包装器没有包装在任何元素中，也可能是这样。