jQuery .load（）如何防止雙擊雙擊加載

我正在使用jQuery的load（）函數將一些頁面加載到容器中。下面是代碼：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

我的問題是如何防止此類雙擊，不能讓加載目標網頁，曾多次不重要的是它被點擊了多少次。

謝謝。

來源

2011-09-14 devjs11

你想讓鏈接在頁面加載後再次點擊嗎？ –

反之亦然，我想在點擊後禁用，然後在頁面加載到容器時激活。 – devjs11

不管發生了什麼好醇'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調用（，.get()等）內的委託功能可能發生這種情況。 div.next必須在頁面上才能正常工作。如果div.next是不是在頁面上，而這並不是嵌套的，只是這樣做：

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

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

委託需要選擇是動態添加元素的父。然後，委託的第一個參數（最後一個例子中的div.next a）是在選定元素（#wrapper）內查找的元素。如果包裝沒有包裹在任何元素中，包裝也可以是body。

來源

2011-09-14 16:38:38

你的版本像一個魅力，但只有.live（）。 .delegate在我的情況下無法識別來自加載頁面的鏈接。任何想法爲什麼會發生？ – devjs11

更新我的答案，看看底部 –

如果這仍然不能幫助委託，我可以看到你的代碼的其餘部分？ –

您可以用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; 
});

來源

2011-09-14 16:13:46 Blender

如果我使用a：not（.clicked），它可以工作，如果我點擊一次，但如果我執行雙擊，它將跳轉到頁面/ 3 /並且不會像正常的url一樣加載容器中的頁面。任何想法爲什麼？ – devjs11

哎呀，忘了'返回false'。檢查更新的代碼。 – Blender

如果快速點擊兩次，它會一直傳遞到頁面...一次點擊就可以正常工作。奇怪的。 – devjs11

You co üld嘗試使用jQuery的一種方法：

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

來源

2011-09-14 16:25:38 SBerg413

我之前嘗試過這種方法，但仍然重複雙擊和三擊加載 – devjs11

+1：我不知道這個功能！但是，如何防止'a'元素再次點擊時跳轉到頁面的頂部？ – Blender

嗯..根據jquery文檔，它不應該這樣做（重複隨後的點擊功能邏輯）。好的一點w /頁面跳回來。讓我給出一些想法。 – SBerg413

存儲您是否正在等待變量中的負載。

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

})()

來源

2011-09-14 16:56:53

jQuery .load（）如何防止雙擊雙擊加載

回答

相關問題