उस तत्व की आईडी प्राप्त करना जिसने एक घटना को निकाल दिया

Question

क्या किसी ईवेंट को आग लगाने वाले तत्व की आईडी प्राप्त करने का कोई तरीका है?

मैं कुछ सोच रहा हूँ:

$(document).ready(function() {
  $("a").click(function() {
    var test = caller.id;
    alert(test.val());
  });
});

<script type="text/javascript" src="starterkit/jquery.js"></script>

<form class="item" id="aaa">
  <input class="title"></input>
</form>
<form class="item" id="bbb">
  <input class="title"></input>
</form>

इस बात को छोड़कर कि संस्करण testमें आईडी होना चाहिए "aaa", यदि घटना को पहले रूप से निकाल दिया जाता है, और "bbb", यदि घटना को दूसरे रूप से निकाल दिया जाता है।

Comments

आपका उदाहरण थोड़ा अजीब है। आप एक क्लिक ईवेंट को 'a' में संलग्न कर रहे हैं, लेकिन कोई एंकर नहीं है। इसे $ में बदलना ('input.title')। अपने प्रश्न के भविष्य के पाठकों के लिए क्लिक (...) थोड़ा स्पष्ट होगा।

— जेसन मूर

आप event.target.idइवेंट हैंडलर का उपयोग किसी ईवेंट को निकाल देने वाले तत्व की आईडी प्राप्त करने के लिए कर सकते हैं ।

— इलियास करीम

Answer 1

JQuery में event.targetहमेशा उस तत्व को संदर्भित करता है जो घटना को ट्रिगर करता है, जहां eventफ़ंक्शन को पैरामीटर पास किया जाता है। http://api.jquery.com/category/events/event-object/

$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});

ध्यान दें कि thisयह भी काम करेगा, लेकिन यह एक jQuery ऑब्जेक्ट नहीं है, इसलिए यदि आप इस पर jQuery फ़ंक्शन का उपयोग करना चाहते हैं, तो आपको इसका उल्लेख करना होगा $(this), जैसे:

$(document).ready(function() {
    $("a").click(function(event) {
        // this.append wouldn't work
        $(this).append(" Clicked");
    });
});

Comments

वाह! धन्यवाद। नहीं पता था कि jQuery अमूर्त है कि इतनी अच्छी तरह से। आपने धमाल मचाया! मुझे लगता है कि यह (() और (event.target) के बीच का अंतर अभी भी होगा - वस्तु होने के नाते आप घटना को उस वस्तु के लिए बाध्य करते हैं जो घटना प्राप्त हुई।

— हफ्थोर सिप

दुर्भाग्य से, event.target अपने कस्टम विशेषताओं तक पहुँच की अनुमति नहीं देता है। ऐसा करने के लिए, किसी को $ (यह) .attr ("संगठन: चीज़") का उपयोग करना चाहिए;

— जियान चोय

@ZianChoy - "कस्टम विशेषताएँ" से आपका क्या तात्पर्य है, यह मुझे पूरा यकीन नहीं है, लेकिन $(event.target)यदि आपको jQuery विधि की आवश्यकता है, तो आप इसका उपयोग कर सकते हैं , जैसे $(event.target).attr("organisation:thingy");,।

— nnnnnn

मुझे लगता है कि इसका ध्यान दें कि अगर आपको डोम को हेरफेर करने के लिए इवेंट टारगेट तक पहुंच की आवश्यकता है तो आप कुछ इस तरह से कर सकते हैं: $ (event.target) .eq (0)। आप तब किसी भी विधि का उपयोग कर सकते हैं जिसका आप सामान्य रूप से $ (Event.target) .eq (0) .find ('li') जैसे डोम तत्व के साथ उपयोग करेंगे।

— रोस्टर

कृपया ध्यान दें, कि: event.target असली आइटम पर क्लिक किया जा रहा है। यदि आप, उदाहरण के लिए, आप एक क्लिक इवेंट को div में बाँधते हैं, और, उस div के अंदर P और H2 एलिमेंट है - event.target, H2 एलिमेंट या P को लौटा देगा, यदि उनमें से किसी एक पर क्लिक किया गया हो। "यह" वास्तव में उस div को वापस कर देगा, जिस पर आपने ईवेंट को लटका दिया था, भले ही आपने किस बाल तत्व को क्लिक किया हो।

— रोब

Answer 2

संदर्भ के लिए, यह कोशिश करो! यह काम करता हैं!

jQuery("classNameofDiv").click(function() {
    var contentPanelId = jQuery(this).attr("id");
    alert(contentPanelId);
});

Comments

@ Gemma दूसरा समाधान मेरे लिए काम नहीं करता था लेकिन यह एक काम करता था। देर से आने के लिए धन्यवाद।

— एचपीडब्ल्यूडी

@dlackey यह मेरे लिए समान है, अन्य समाधान मेरे फ़ायरफ़ॉक्स 12 पर काम नहीं किया, लेकिन यह एक किया। धन्यवाद

— linuxatico

एम्बेडेड एसवीजी में एक तत्व की आईडी प्राप्त करने के लिए शीर्ष उत्तर काम नहीं करता है। $(this).attr("id");कर देता है।

— मैट फ्लेचर

ध्यान रखें कि यदि आपका क्लिक ईवेंट बच्चों के साथ किसी तत्व पर है, e.targetतो आपको वह सटीक तत्व देगा, जिसके कारण ईवेंट बच्चे के होने पर भी निकाल दिया thisजाएगा , जबकि आपको वह एलीमेंट दिया जाएगा , जिसमें ईवेंट संलग्न है।

— नमूना

Answer 3

यद्यपि अन्य पदों में इसका उल्लेख है, मैं इसे स्पष्ट करना चाहता था:

$(event.target).id अपरिभाषित है

$(event.target)[0].id आईडी विशेषता देता है।

event.target.id आईडी विशेषता भी देता है।

this.id आईडी विशेषता देता है।

तथा

$(this).id अपरिभाषित है।

बेशक, अंतर jQuery वस्तुओं और डोम वस्तुओं के बीच है। "id" एक DOM प्रॉपर्टी है इसलिए आपको इसका उपयोग करने के लिए DOM एलिमेंट ऑब्जेक्ट पर होना चाहिए।

(इसने मुझे फँसा दिया, इसलिए यह शायद किसी और को फँसा दे)

Comments

मेरे लिए, event.target.idकुछ नहीं देता है!

— आर्टएक्सएरेक्स

@artaxerxe का अर्थ है कि आपके क्लिक किए गए तत्व में id नहीं है: P; इस तरह की चीजों के लिए भी jquery का उपयोग न करें .... इवेंट जावास्क्रिप्ट विशेषताओं का उपयोग करें क्योंकि यह तेजी से होता है।

— हेलबाई

$(event.target).attr('selector');मेरे लिए पूरी तरह से काम किया।

— सोलस्टेस्ट

Answer 4

सभी घटनाओं के लिए, केवल jQuery तक सीमित नहीं है जिसका आप उपयोग कर सकते हैं

var target = event.target || event.srcElement;
var id = target.id

जहां event.targetयह event.srcElementIE के लिए वापस गिर जाता है विफल रहता है । ऊपर दिए गए कोड को स्पष्ट करने के लिए jQuery की आवश्यकता नहीं है, बल्कि jQuery के साथ भी काम करता है।

Comments

JQuery का उपयोग नहीं करने का अर्थ है कि कोड की कम लाइनें सटीक परिणाम प्राप्त करते समय चलाई जाती हैं, जैसा कि ऊपर दिखाया गया है। jQuery के अमूर्त दूर js। यह सीधा js उत्तर है, और आकार को देखो!

— xrDDDD

क्या यह 'इस' कीवर्ड का उपयोग करना बेहतर नहीं है, जो हमेशा आपको उस तत्व के गुणों तक पहुंच प्रदान करता है जो घटना को लागू करता है?

— मॉर्फिडन

बस इस जवाब को पाने के लिए सभी jQuery बकवास के माध्यम से खोदना था। धन्यवाद। यह पहले से कहीं अधिक प्रासंगिक है: needmorejquery.com

— gromit190

भयानक, वास्तव में मेरी मदद की

— Barbz_YHOOL

Answer 5

आप (this)उस ऑब्जेक्ट को संदर्भित करने के लिए उपयोग कर सकते हैं जिसने फ़ंक्शन को निकाल दिया।

'this'एक DOM तत्व है जब आप कॉलबैक फ़ंक्शन (jQuery के संदर्भ में) के अंदर होते हैं, उदाहरण के लिए, क्लिक, प्रत्येक, बाइंड, आदि तरीकों से बुलाया जा रहा है।

यहाँ आप और अधिक सीख सकते हैं: http://remysharp.com/2007/04/12/jquerys-this-demystized/

Comments

यदि आपके पास ऐसा कोई फ़ंक्शन है $(html).click()(तो) html ऑब्जेक्ट लौटाएगा और क्लिक किए गए तत्व नहीं

— TCHdvlp

Answer 6

मैं एक डेटाबेस से डायनामिकली एक टेबल जेनरेट करता हूं, JSON में डेटा प्राप्त करता हूं और इसे एक टेबल में डालता हूं। प्रत्येक तालिका पंक्ति को एक विशिष्ट मिला ID, जिसे आगे के कार्यों के लिए आवश्यक है, इसलिए, यदि DOM को बदल दिया जाता है, तो आपको एक अलग दृष्टिकोण की आवश्यकता होती है:

$("table").delegate("tr", "click", function() {
   var id=$(this).attr('id');
   alert("ID:"+id);  
});

Comments

अरे हाँ, यह वही है जिसकी मुझे तलाश थी। यह नए "ऑन" के लिए भी समान काम करता है क्योंकि "डेलीगेट" अब पदावनत हो गया है। मेरे पास डीबी डेटा से गतिशील रूप से बनाए गए चेकबॉक्स थे, और निश्चित रूप से उन सभी के पास अलग-अलग आईडी थे, जिन्हें क्लिक करने पर मुझे कुछ करने के लिए उपयोग करने की आवश्यकता थी। मैंने इस तरीके का उपयोग यहां किया कि कौन सी आईडी वास्तव में क्लिक की गई। पुराने स्कूल जेएस में मैंने सिर्फ चेकबॉक्स के HTML में प्रत्येक चेकबॉक्स से आईडी पारित किया, लेकिन jQuery इवेंट हैंडलर मॉडल के साथ ऐसा नहीं कर सकता।

— मिकेटो

Answer 7

तत्व जो हम घटना संपत्ति में निकाल दिया घटना है

event.currentTarget

हमें DOM नोड ऑब्जेक्ट मिलता है जिस पर ईवेंट हैंडलर सेट किया गया था।

---

अधिकांश नेस्टेड नोड जो हम में है बुदबुदाहट प्रक्रिया शुरू कर दिया

event.target

---

ईवेंट ऑब्जेक्ट हमेशा इवेंट हैंडलर का पहला गुण है, उदाहरण:

document.querySelector("someSelector").addEventListener(function(event){

 console.log(event.target);
 console.log(event.currentTarget);

});

इवेंट डेलिगेशन के बारे में आप http://maciejsikora.com/standard-events-vs-event-delegation/ में पढ़ सकते हैं

Answer 8

एक jQuery वस्तु के रूप में स्रोत तत्व के माध्यम से प्राप्त किया जाना चाहिए

var $el = $(event.target);

यह आपको क्लिक फ़ंक्शन का तत्व प्रदान करने के बजाय, क्लिक का स्रोत प्राप्त करता है। उपयोगी हो सकता है जब क्लिक इवेंट पैरेंट ऑब्जेक्ट EG.a पर क्लिक करें इवेंट टेबल की पंक्ति पर है, और आपको उस सेल की आवश्यकता है जिसे क्लिक किया गया था

$("tr").click(function(event){
    var $td = $(event.target);
});

Answer 9

आप उपयोग करने की कोशिश कर सकते हैं:

$('*').live('click', function() {
 console.log(this.id);
 return false;
});

Answer 10

यह अधिकांश प्रकार के तत्वों के साथ काम करता है:

$('selector').on('click',function(e){
    log(e.currentTarget.id);
    });

Answer 11

प्रत्यायोजित ईवेंट हैंडलर के मामले में, जहां आपके पास कुछ इस तरह हो सकता है:

<ul>
    <li data-id="1">
        <span>Item 1</span>
    </li>
    <li data-id="2">
        <span>Item 2</span>
    </li>
    <li data-id="3">
        <span>Item 3</span>
    </li>
    <li data-id="4">
        <span>Item 4</span>
    </li>
    <li data-id="5">
        <span>Item 5</span>
    </li>
</ul>

और आपका जेएस कोड ऐसा है:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId = $target.data('id');

        //do something with itemId
    });
});

आप संभावना से अधिक पाएंगे कि आइटमआईडी है undefined, क्योंकि एलआई की सामग्री को एक में लपेटा गया है <span>, जिसका अर्थ है कि <span>संभवतः घटना लक्ष्य होगा। आप इसे एक छोटी सी जाँच के साथ प्राप्त कर सकते हैं, जैसे:

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target).is('li') ? $(event.target) : $(event.target).closest('li'),
            itemId = $target.data('id');

        //do something with itemId
    });
});

या, यदि आप पठनीयता को अधिकतम करना चाहते हैं (और jQuery रैपिंग कॉल के अनावश्यक पुनरावृत्ति से भी बचें):

$(document).ready(function() {
    $('ul').on('click li', function(event) {
        var $target = $(event.target),
            itemId;

        $target = $target.is('li') ? $target : $target.closest('li');
        itemId = $target.data('id');

        //do something with itemId
    });
});

ईवेंट डेलिगेशन का उपयोग करते समय, .is()विधि यह सत्यापित करने के लिए अमूल्य है कि आपका ईवेंट लक्ष्य (अन्य चीजों के बीच) वास्तव में वही है जो आपको होना चाहिए। .closest(selector)DOM ट्री को सर्च करने के लिए प्रयोग करें , और नीचे सर्च करने के लिए .find(selector)(आम तौर पर कपल के साथ .first(), इन .find(selector).first()) का उपयोग करें। उपयोग करते .first()समय आपको उपयोग करने की आवश्यकता नहीं है .closest(), क्योंकि यह केवल पहले मिलान वाले पूर्वज तत्व को .find()लौटाता है , जबकि सभी मिलान वाले वंशज देता है।

Comments

उपयोगी! मैंने अपने मामले में समायोजित किया क्योंकि मुझे सिर्फ एक साधारण <li id ​​= "numberID"> मिला और इसलिए मैंने itemId = $ target.attr ('id') का उपयोग किया।

— जप्पेस्कु

बस एक साधारण आईडी विशेषता का उपयोग करने के बारे में सावधान रहें, क्योंकि हर आईडी को उस पृष्ठ पर अद्वितीय होना चाहिए। इसलिए यदि आपको किसी कारणवश उस पृष्ठ पर दो सूचियाँ मिलनी चाहिए, तो आप डुप्लिकेट आईडी के साथ हवा देंगे, जो कि एक बुरी बात है। इसलिए मैं हमेशा भविष्य में प्रूफिंग के लिए डेटा-आईडी का उपयोग करता हूं।

— Isochronous

Answer 12

यूज़ .on इवेंट का उपयोग कर सकते हैं

  $("table").on("tr", "click", function() {
                    var id=$(this).attr('id');
                    alert("ID:"+id);  
                });

Answer 13

यह z-indexउपरोक्त उत्तरों में उल्लिखित घटना पैरामीटर से अधिक पर काम करता है:

$("#mydiv li").click(function(){

    ClickedElement = this.id;
    alert(ClickedElement);
});

इस तरह आपको हमेशा id(इस उदाहरण में li) तत्व मिलेगा । इसके अलावा जब माता पिता के एक बच्चे तत्व पर क्लिक किया।

Answer 14

var buttons = document.getElementsByTagName('button');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
    buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
    // do something based on button selection here...
    alert(this.id);
}

कार्य JSFiddle यहाँ ।

Comments

मुझे लगता है कि यह काम करने के लिए एक पुराना विकल्प जैसा है

— अर्नस पेक्लिस

@ ArnasPečelis पुराना? नहीं, सिर्फ jQuery नहीं।

— केविन बी

Answer 15

बस thisसंदर्भ का उपयोग करें

$(this).attr("id")

या

$(this).prop("id")

Comments

वह गुण idउस तत्व से प्राप्त करता है जहाँ click()पर असाइन किया गया है। यदि आपको उस विधि में अधिक डेटा स्थानांतरित करने की आवश्यकता है, data-some-id="<?php $someId; ?>"तो आपको इसे पुनर्प्राप्त करने के लिए `$ (()) .data (" कुछ-आईडी ") कर सकते हैं।

— रोलैंड

Answer 16

this.element.attr("id") IE8 में ठीक काम करता है।

Answer 17

ये दोनों काम करते हैं,

jQuery(this).attr("id");

तथा

alert(this.id);

Answer 18

$(".classobj").click(function(e){
    console.log(e.currentTarget.id);
})

Comments

@ManuelMannhardt इस उत्तर में कोई लिंक नहीं है, यह केवल-कोड उत्तर है, लिंक-केवल उत्तर नहीं है

— barbsan

Answer 19

आप बदले हुए आइटम के लिए आईडी और मान प्राप्त करने के लिए फ़ंक्शन का उपयोग कर सकते हैं (मेरे उदाहरण में, मैंने एक चयन टैग का उपयोग किया है।

              $('select').change(
                   function() {
                        var val = this.value;
                        var id = jQuery(this).attr("id");
                        console.log("value changed" + String(val)+String(id));
                   }
               );

Answer 20

मैं साथ काम कर रहा हूं

jQuery स्वतः पूर्ण

मैंने eventऊपर वर्णित के रूप में तलाश करने की कोशिश की , लेकिन जब अनुरोध फ़ंक्शन में आग लग जाती है तो यह उपलब्ध नहीं होता है। मुझे this.element.attr("id")इसके बदले एलिमेंट की आईडी मिलती थी, और यह ठीक काम करने लगती थी।

Answer 21

कोणीय 7.x के मामले में आप मूल तत्व और इसकी आईडी या गुण प्राप्त कर सकते हैं।

myClickHandler($event) {
    this.selectedElement = <Element>$event.target;
    console.log(this.selectedElement.id)
    this.selectedElement.classList.remove('some-class');
}

एचटीएमएल:

<div class="list-item" (click)="myClickHandler($event)">...</div>