ईवेंट पर jQuery का उपयोग करके क्लिक किया गया तत्व प्राप्त करें?

Question

जब डायनामिक रूप से जनरेट किया गया बटन क्लिक किया जाता है, तो मैं निम्नलिखित कोड का उपयोग कर रहा हूं।

$(document).on("click",".appDetails", function () {
    alert("test");
});

आम तौर पर, यदि आप अभी-अभी उस तत्व को प्राप्त करने के लिए $('.appDetails').click()उपयोग कर सकते हैं $(this)जिस पर क्लिक किया गया था। मैं उपरोक्त कोड के साथ इसे कैसे पूरा करूंगा?

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

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});

Answer 1

जितना सरल हो सकता है

$(this)यहाँ भी उपयोग करें

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});

Comments

ऐसा लगता है कि मैं सर्वर से कैशिंग समस्या से निपट रहा हूं। माफ़ करना।

— डेविल्स एडवोकेट

ES6 का उपयोग करने वालों के लिए एक चेतावनी। एरो फ़ंक्शंस 'यह' सेट नहीं करते हैं इसलिए यह अभिभावक होगा। तो, मूल रूप से यहाँ एक तीर फ़ंक्शन का उपयोग न करें।

— थोमस-पेटर

@ थोमस-पीयर मैं कहता हूं कि आप इसे एक जवाब में बदल देंगे

— जैक

@ थोमस-पीटर ने मुझे और दर्जनों मिनटों की हताशा से बचाया, धन्यवाद।

— मिलान वेलेबिट

@ थोमस-पीर आपने मुझे बचा लिया! मैं यह पता लगाने की कोशिश कर रहा था कि यह 30 मिनट तक क्यों नहीं जाग रहा था ... धन्यवाद!

— क्रिस्काटू बीजी

Answer 2

आप अपने फ़ंक्शन पर ईवेंट पैरामीटर याद कर रहे हैं।

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});

Comments

यह मेरे लिए एकदम सही था। यह उस तत्व को देता है जिसे क्लिक किया गया था - $ (यह) केवल उस तत्व को देता है जिसके पास घटना जुड़ी हुई थी।

— बिल तारबेल

यह अचूक तरीका है। धन्यवाद :)

— स्वेताजा हाजरा

Answer 3

इसे संभालने का पारंपरिक तरीका ES6 के साथ अच्छा नहीं खेलता है। आप इसके बजाय यह कर सकते हैं:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);

  this.delete(clickedElement.data('id'));
});

ध्यान दें कि ईवेंट लक्ष्य क्लिक किया गया तत्व होगा, जो आपके इच्छित तत्व नहीं हो सकता है (यह ईवेंट प्राप्त करने वाला बच्चा हो सकता है)। वास्तविक तत्व प्राप्त करने के लिए:

$('.delete').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.delete');

  this.delete(targetElement.data('id'));
});

Answer 4

एक सरल तरीका है कि आप अपने HTML टैग में डेटा विशेषता को पास करें।

उदाहरण:

<div data-id='tagid' class="clickElem"></div>

<script>
$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('data');
   alert('you clicked on button #' + clickedBtnID);
});
</script>