jQuery .load() डबल लोडिंग से डबल लोडिंग को रोकने के लिए

Question

मैं कुछ पेजों को कंटेनर में लोड करने के लिए jQuery लोड() फ़ंक्शन का उपयोग कर रहा हूं। यहाँ कोड है:

$('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

जो भी अच्छा ol 'जावास्क्रिप्ट के साथ हुआ? आप सभी शुद्ध 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 हो सकता है यदि यह किसी भी तत्व में लपेटा नहीं गया है।

Answer 2

आप 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 3

आप सह uld jquery एक विधि का उपयोग करने का प्रयास करें:

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

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

})()