केवल एक बार jQuery के साथ एक ऑनक्लिक हैंडलर जोड़ें - भले ही

Question

कहा जाता है यदि मैं दो बार तत्व के ऑनक्लिक ईवेंट में हैंडलर असाइन करता हूं, तो हैंडलर को दो बार निष्पादित किया जाएगा। लेकिन मैं इसे बदलना चाहता हूं, भले ही मैं इसे दो बार असाइन करता हूं, हैंडलर केवल एक बार निष्पादित करेगा।

$('.button').click(
    function(){ 
     alert('here'); 
}); 
$('.button').click(
    function(){ 
     alert('here'); 
}); 

तो मैं हैंडलर दो बार जोड़ दिया है:

अतर्कसंगत उदाहरण मुद्दा प्रदर्शित करने के लिए। अब जब मैं उस वर्ग के साथ एक तत्व पर क्लिक करता हूं, तो मुझे दो अलर्ट बॉक्स मिलेंगे।

सवाल यह है कि, मैं इसे कैसे प्रतिबंधित करूं ताकि मुझे केवल एक अलर्ट बॉक्स मिले?

Answer 1

तो .one() सच है कि आप (ईवेंट हैंडलर के बाद यह एक बार ट्रिगर की जा रही दूर करने) के बाद क्या कर रहे हैं में है तो मुझे विश्वास है कि सही जवाब है। यदि नहीं, तो आप इसे बाध्य करने से पहले ईवेंट को अनइंड कर सकते हैं:

var myEventHandler = function() {alert('hello')}; 
$('a').unbind('click', myEventHandler); 
$('a').bind('click', myEventHandler); 

काम करना चाहिए।

संपादित करें: चूंकि यह उत्तर वोट प्राप्त करता रहता है, इसलिए मैं एक और (ज्यादातर मामलों में बेहतर) समाधान जोड़ूंगा जो कम से कम ओपी के मामले में काम करेगा। गतिशील रूप से जोड़े गए सामग्री से निपटने पर, सीधे तत्व पर ईवेंट हैंडलर को लागू करने के बजाय मूल तत्व पर jQuery के on() का उपयोग करें।

http://api.jquery.com/on/

Answer 2

एक का उपयोग करें। http://api.jquery.com/one/

$(".button").one('click', function(){ 
    alert('....') 
}); 

Answer 3

मुझे लगता है कि समारोह में दो बार जोड़ने के लिए कोई मतलब नहीं है। हालांकि यदि आपको तब करना है तो आप फ़ंक्शन में से किसी एक को return false जोड़ सकते हैं।

$('.button').click(
    function(){ 
     return false; 
     alert('here'); 
}); 
$('.button').click(
    function(){ 
     alert('here'); 
});​ 

Answer 4

, घटनाओं केवल एक बार शुरू हो रहा है उन्हें केवल एक बार के लिए बाध्य करने के लिए। जब गतिशील तत्वों को जोड़ने, on() का उपयोग कर पेरेंट तत्व को ईवेंट हैंडलर बाँध:

इस jsfiddle देखें:

<div id="container"> 
<p>Paragraph #1</p> 
</div> 

<div> 
<button id="add">Add Elements</button> 
</div> 

<script type="text/javascript"> 
var n = 1; 
$('#add').click(function() { 
    $('#container').append('<p>Paragraph #' + ++n + '</p>'); 
}); 
$('#container').on('click', 'P', function() { 
    alert($(this).text()); 
}); 
</script> 

नोट कैसे ईवेंट हैंडलर्स केवल एक बार on() साथ पंजीकृत हैं। कोड जो गतिशील रूप से तत्व जोड़ता है वह ईवेंट हैंडलर पंजीकृत नहीं करता है।

Answer 5

एक छोटे चाल मदद कर सकते हैं:

jQuery(".button:not(.clickadded)").click(function(){ 

    alert('here'); 

).addClass("clickadded"); 

Answer 6

यहाँ एक विधि मैं उपयोग कर रहा हूँ, कुछ मायनों में Miquel की विधि के समान है।

$.prototype.once = function() { 
    var ret = this.not(function() { 
     return this.once; 
    }); 
    this.each(function(id, el) { 
     el.once = true; 
    }); 
    return ret; 
}; 

इस तरह यह प्रयोग करें,

$('#footer') 
    .once() 
    .click(function(){ 
     console.log('click the footer'); 
    }); 

एक बार भी एक पैरामीटर का समर्थन करता है, ताकि आप विभिन्न प्रकार

Answer 7

तुम भी कार्य बंद के साथ समारोह में किसी भी मौजूदा क्लिक ईवेंट को हटा सकते हैं हो सकता है (' क्लिक करें '):

$('.button').off('click').click(function() { 
    ... 
}); 

Answer 8

मैंने इसे ध्वज से हल किया, मुझे पता है कि यह सिर्फ एक विचार से सबसे अच्छा नहीं है

if (!alreadyBound) { 
    $('.button').bind('click', submitEvtHandler); 
    alreadyBound = true; 
}