jQuery क्लिक() अभी भी ट्रिगर किया जा रहा है। क्लिक करने योग्य वर्ग हटा दिया गया है

Question

मुझे एक विशेष कक्षा के एक div को सौंपा गया एक क्लिक ईवेंट मिला है। जब क्लिक होता है, कक्षा को div से हटा दिया जाता है। हालांकि, आप अभी भी div पर क्लिक कर सकते हैं और click() ईवेंट ट्रिगर किया गया है (भले ही कक्षा को हटा दिया गया हो)।

एचटीएमएल:

<div class="clickable"> 
    <p>Click me</p> 
</div> 

जावास्क्रिप्ट/jQuery:

$('.clickable').click(function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
}); 

मैं वर्गों निकाल दिए जाते हैं और कहा कि (पाठ का रंग के रूप में देख सकते हैं के रूप में बदल दिया है यहाँ एक उदाहरण है मेरे सीएसएस प्रति)। हालांकि, आप अभी भी कई बार div पर क्लिक करने में सक्षम हैं और alert() अभी भी दिखाई देंगे।

यह भी विपरीत में प्रतीत होता है; इसलिए यदि मैं clickable कक्षा को div में जोड़ता हूं, तो $('.clickable').click(function() {...}); में कोड नहीं चलाया जाता है (लेकिन दृश्यमान रूप से, नई शैलियों के अनुसार div परिवर्तन)।

मैं इसे कैसे बना सकता हूं ताकि क्लिक ईवेंट घटनाओं से मेल खा सकें, jQuery के बाद भी clickable कक्षा को जोड़ता/हटा देता है?

Answer 1

जब आप एक डोम तत्व को एक ईवेंट हैंडलर देते हैं, यह बरकरार रहता है की कोशिश करो। कक्षा तत्व को संदर्भित करने का एक तरीका है, और कक्षा को बदलने से ईवेंट हैंडलर को अनबिंड नहीं किया जाएगा, इसके लिए आपको मैन्युअल रूप से हैंडलर को अनबिंड करना होगा, और यदि jQuery 1.7+ on() और off() का उपयोग करने का तरीका है:

$('.clickable').on('click', function() { 
    $(this).removeClass('clickable').addClass('not-clickable').off('click'); 
}); 

इस तत्व क्लिक करने योग्य केवल एक बार होता है, और आप बस के रूप में है कि पहले क्लिक के बाद पूर्ण रूप से अपने हैंडलर निकल जाएंगे इस्तेमाल कर सकते हैं बजाय one() समारोह में बनाया,:

$('.clickable').one('click', function() { 
    $(this).removeClass('clickable').addClass('not-clickable'); 
}); 

Answer 2

अनबाइंड क्लिक करें घटना - $(this).unbind('click');' की तरह इस

$('.clickable').click(function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    $(this).unbind('click');' 
}); 

Answer 3

$(document).on('click', '.clickable', function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
}); 

Answer 4

$('.clickable').live('click',function() { 
    $(this).removeClass('clickable');//remove the class 
    $(this).unbind('click');//to remove the click event 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
}); 

Answer 5

यहां तक ​​कि असाइनमेंट की आपकी समझ थोड़ा गलत है। कृपया अपने कोड

$('.clickable').click(function() 

1. वर्ग '.clickable'
2. असाइन onclick तत्व

देखें करने के लिए हैंडलर, यह तत्व यह है कि के हैंडलर मिलता है साथ तत्व खोजें पढ़ , कक्षा का नाम नहीं। आपको हैंडलर को हटाने की आवश्यकता है।उसके लिए आपको कोशिश कर सकते हैं:

$('.clickable').click(function() { 
    $(this).removeClass('clickable'); 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
    $(this).unbind('click'); 
}); 

Answer 6

आप jQuery संस्करण से इस

$(document.body).delegate('.clickable', 'click', function(e){ 
    $(this).removeClass('clickable'); 
    alert('Clicked!'); 
}); 

उपयोग कर सकते हैं 1,7 delegate()on()

$(document.body).on('click', '.clickable', function(e){ 
    $(this).removeClass('clickable'); 
    alert('Clicked!'); 
}); 

या

$('.clickable').on('click', function(e){ 
    $(this).removeClass('clickable').off('click'); 
    alert('Clicked!'); 
}); 

इसके अलावा ने ले जाता है आप विधि one() उपयोग कर सकते हैं - यह बाध्य करने के लिए बराबर है, लेकिन आप केवल एक बार घटना क्लिक फोन jQuery का उपयोग one समारोह घटनाओं यह अपने आप को नष्ट कर देगा बाध्य करने के लिए चाहते हैं एक बार

$('.clickable').one('click', function(e){ 
    alert('Clicked!'); 
}); 

Answer 7

होता है।

$('.clickable').one('click',function() { 
    $(this).removeClass('clickable');//remove the class 
    $(this).addClass('not-clickable'); 
    alert('Clicked!'); 
});