jQuery .click घटना को जोड़ने रहता है, बल्कि यह जगह से

Question

मैं the following code block है:

function testJQueryClick(){ 
    $('#button2').click(function(){ alert ('Debug'); return false; });  
} 

जब मैं समारोह एक बार कहते हैं, मैं उम्मीद चेतावनी पाने (और फिर बटन 2 पर क्लिक करें)। जब मैं एक ही फ़ंक्शन को दूसरी बार कॉल करता हूं और फिर बटन 2 पर क्लिक करता हूं, तो मुझे दो अलर्ट मिलते हैं, तीसरे बार मुझे तीन मिलता है, आदि। JQuery को प्रतिस्थापित करने के बजाए हर बार .click ईवेंट जोड़ना प्रतीत होता है।

मुझे उम्मीद है कि .click हैंडलर प्रतिस्थापित होने पर प्रत्येक बार इसे कॉल करेगा। मुझे jQuery documentation में कुछ भी नहीं मिला है जो या तो इसे अपेक्षित व्यवहार के रूप में पुष्टि करता है या नहीं।

Answer 1

आप चाहेंगे कि पहली कॉल off करने के लिए पुराने घटना श्रोता से छुटकारा पाने:

function testJQueryClick() { 
    $('#button2').off('click').on('click', function() { 
     alert ('Debug'); 

     return false; 
    });  
} 

See it in the Pen in action।

Answer 2

ऐसा इसलिए है क्योंकि हर बार जब आप एक नया क्लिक हैंडलर असाइन कर रहे होते हैं। यह सिर्फ यह होना चाहिए:

$('#button2').click(function(){ alert ('Debug'); return false; }); 

दस्तावेज़ लोड के बाद।

Answer 3

जबकि एक घटना jQuery बंधन पर विचार नहीं करता क्या घटनाओं को पहले से ही नियंत्रण पर बाध्य कर रहे हैं यह सिर्फ एक और घटना बांधता है ..

अनबाइंड जैसे:

$('selector').unbind("eventType"); 

आप निकालना unbind एपीआई इस्तेमाल कर सकते हैं बाध्य घटना पहले या यदि यह एक ही क्लिक इवेंट हैंडलर है लेकिन आप इसे कई बार कॉल कर रहे हैं क्योंकि उसी चयनकर्ता के साथ एक नए नियंत्रण को डोम में डाला गया है तो आपको शायद live एपीआई का उपयोग करना चाहिए ..

आशा tihs मदद करता है ..

Answer 4

http://api.jquery.com/bind/ पर बाइंड() विधि के लिए प्रलेखन देखें। घटना बाध्यकारी विधि जैसे कि "क्लिक()", "फोकस()", आदि ... केवल बाइंड के लिए शॉर्टकट हैं (इवेंट टाइप) इसलिए बाइंड() दस्तावेज़ पढ़ने से आपको अंतर्दृष्टि मिल जाएगी कि सभी घटनाएं कैसे बाध्य होती हैं काम। मुझे लगता है कि आपके विशिष्ट मुद्दे से संबंधित बिट यह है:

"जब कोई ईवेंट किसी तत्व तक पहुंच जाता है, तो तत्व के लिए उस ईवेंट प्रकार से जुड़े सभी हैंडलर निकाल दिए जाते हैं।"

मतलब है कि यदि आप हैंडलर "फ़ंक्शन() {चेतावनी ('डीबग') को बांधते हैं, तो झूठी वापसी करें;}" क्लिक ईवेंट पर 5 बार, सभी 5 निष्पादित होंगे।

एक साइडेनोट के रूप में, एक ऑनक्लिक हैंडलर से जुड़ने के लिए पसंदीदा और अधिक आधुनिक तरीका एक लिंक के "ऑनक्लिक" विशेषता को पूरी तरह से बाईपास करना है और jQuery का उपयोग करके अपने सभी बाध्यों को डोम लोड पर निष्पादित करना है। यहाँ एक उदाहरण और अधिक आधुनिक बांध का उपयोग करता है है और यह भी # Button2 क्लिक हैंडलर जब # Button1 क्लिक किया जाता है आग ट्रिगर() विधि का इस्तेमाल करता है (जो कि मैं क्या लगता है कि आप अपने उदाहरण में प्राप्त करने के लिए कोशिश कर रहे थे):

$(document).ready(function() { 
    $('#button2').click(function(){ alert ('Debug'); return false; }); // Bind alert to #button2 click 
    $('#button1').click(testJQueryClick);           // Bind testJQueryClick() to #button1 click 
}); 

function testJQueryClick(e) { 
    $('#button2').trigger('click'); // Trigger #button2 click handler 
} 

Answer 5

जैसा कि पहले बताया गया था कि यदि आप इसे बदलना चाहते हैं तो नया जोड़ने से पहले आपको पुराने क्लिक हैंडलर को हटाने की आवश्यकता है।

jQuery 1.7 के रूप में पसंदीदा तरीका off का उपयोग करना है। (unbind jQuery 3 के रूप में हटा दिया गया है)

उदाहरण के लिए:

function testJQueryClick(){ 
    $('#button2').off('click').click(function(){alert ('Debug'); return false;});  
}