jQuery माता पिता पर क्लिक करें घटना है, लेकिन बच्चे को खोजने (क्लिक किया) तत्व

Question

देना कहते हैं कि मैं एक माता पिता के तत्व जो खुद के अंदर इतने सारे नेस्टेड बच्चे तत्व है है:

<div id="p"> 
    <div id="c1"> 
     <div id="c2"></div> 
     <div id="c3"></div> 
    </div id="c4"> 
     <div id="c5"></div> 
    </div> 
</div> 

मैं पहले से ही एक click घटना बाँध लिया है

$('#p').bind('click', function() { 
    alert($(this).attr('id')); 
}); 

क्योंकि घटना पेरेंट तत्व को सौंपा गया है, मैं हमेशा पैरेंट आईडी देखते हैं, हालांकि, मैं पता लगाने के लिए किसी भी संभव तरह से जो इस बच्चे तत्वों का मिल रहा है, तो सोच रहा हूँ: माता-पिता पर क्लिक किया?

मैं किसी भी घटना को बाल तत्वों को असाइन नहीं कर सकता या पेरेंट div से ईवेंट श्रोता को हटा नहीं सकता।

Answer 1

ईवेंट को ट्रिगर करने वाले आइटम को प्राप्त करने के लिए आपको ईवेंट ऑब्जेक्ट को फ़ंक्शन करने की आवश्यकता है, event.target आपको स्रोत तत्व देगा।

Live Demo

$('#p').bind('click', function(event) { 
    alert(event.target.id); 
}); 

या

Live Demo

$('#p').bind('click', function(event) { 
    alert($(event.target).attr('id')); 
}); 

संपादित

प्रदर्शन, सादगी और पठनीयता के लिए पहली विधि event.target.id को दूसरी $(event.target).attr('id') पर प्राथमिकता दी गई है।

Answer 2

आप नीचे दिए गए कोड को आजमा सकते हैं। Jsfiddle भी कोशिश करें (डेमो)।

$('#p').on('click', function(event) { 
    alert(event.target.id); 
});​ 

Try the demo

अपने दूसरे प्रश्न आप बच्चे को घटना आवंटित और निकाल सकते है कि उसे अपने जनक है से का जवाब। इसकी जांच करें।

.stopPropagation(); 

डोम पेड़ खलबली मचाने वाले, ईवेंट की सूचना दी जा रही से किसी भी माता पिता संचालकों को रोकने से घटना को रोकता है। Read more

आप विशिष्ट घटना केवल मार डाला और कोई अन्य घटना की अनुमति देने जा करने के लिए निकाल दिया जा करना चाहते हैं तो आप नीचे दिए गए

event.stopImmediatePropagation() 

कोड निष्पादित किया जा रहा से संचालकों के बाकी रहता है और खलबली मचाने वाले से घटना को रोकता का उपयोग डोम पेड़ Read more

मुझे आशा है कि इससे आपकी समस्या हल हो जाएगी। यदि आपके कोई प्रश्न हैं तो कृपया पूछने में संकोच न करें। धन्यवाद

Answer 3

यदि आपके तत्वों में पोते हैं, तो बच्चे को पाने का एक बेहतर तरीका है। संकेत से अधिक नोट करें।

$('.parent > .child').click(function() { 
    // This will be the child even if grandchild is clicked 
    console.log($(this)); 
});