How to get the id of the element clicked using jQuery

Question

<div class="main_div">
    <div id="inner_div">    
        <span id="d1" class="get_clicked">click to get id</span>
    </div>
</div>

How to get the id of the clicked element? The span which is present inside the inner_div will be having different ids because I will be loading the span from the model(MVC) using jquery ajax. So there will be 'n' number of span. All the span will have unique id. I want to get the id of the span which I click.

How the get the id of the span when clicked? How to do this using jQuery?

the span is still being loaded via ajax right? – DGS Sep 08 '13 at 05:34 — DGS, Sep 08 '13 at 05:34
yes, I am loading the span using jquery ajax. – Gourav Sep 08 '13 at 05:36 — Gourav, Sep 08 '13 at 05:36
is `inner div` or `main_div` loaded by ajax? – DGS Sep 08 '13 at 05:37 — DGS, Sep 08 '13 at 05:37
inner_div is loaded using ajax. – Gourav Sep 08 '13 at 05:38 — Gourav, Sep 08 '13 at 05:38

Tushar Gupta - curioustushar · Accepted Answer · 2013-09-08T05:39:41.687

50

update as you loading contents dynamically so you use.

$(document).on('click', 'span', function () {
    alert(this.id);
});

old code

$('span').click(function(){
    alert(this.id);
});

or you can use .on

$('span').on('click', function () {
    alert(this.id);
});

this refers to current span element clicked

this.id will give the id of the current span clicked

edited Sep 08 '13 at 05:39

answered Sep 08 '13 at 05:34

Tushar Gupta - curioustushar

58,085
24
103
107

the span is being loaded via ajax so that wont work, you have to use delegate handlers instead – DGS Sep 08 '13 at 05:36
@DGS i have used `.on` – Tushar Gupta - curioustushar Sep 08 '13 at 05:37
1

That doesnt make a difference. Will still only bind events to the elements currently in the DOM – DGS Sep 08 '13 at 05:37
The first two still wont – DGS Sep 08 '13 at 05:41
Thank you very much @TusharGupta its working now. can you explain the logic behind it? – Gourav Sep 08 '13 at 05:43
@user2758150 as you loaded contents dynamically through AJAX the normal code won't work. You have to use [.on()](http://api.jquery.com/on/) – Tushar Gupta - curioustushar Sep 08 '13 at 05:45
OK OK. Likewise I have two more contents which I am going to load dynamically. For example two buttons. So should I follow the same logic for them as well? – Gourav Sep 08 '13 at 05:48
You have to specifically use Delegated `.on()` since `.on()` can be used as Direct or Delegated where direct is the same thing as doing `.bind()` – DGS Sep 08 '13 at 05:54
For that I have specify the tag name right? The jquery which will search through the whole document and then find the element which is clicked. correct? – Gourav Sep 08 '13 at 05:56
@user2758150 `$(document).on( eventName, selector, function(){} );` – Tushar Gupta - curioustushar Sep 08 '13 at 05:59
@user2758150 welocme :) Happy to help :) – Tushar Gupta - curioustushar Sep 08 '13 at 06:04
@TusharGupta take a look over this issue http://stackoverflow.com/questions/18680213/what-is-workflow-of-the-react-js – Gourav Sep 08 '13 at 06:18

score 10 · Answer 2 · edited May 23 '17 at 11:47

Since you are loading in the spans via ajax you will have to attach delegate handlers to the events to catch them as they bubble up.

$(document).on('click','span',function(e){
    console.log(e.target.id)
})

you will want to attach the event to the closest static member you can to increase efficiency.

$('#main_div').on('click','span',function(e){
    console.log(e.target.id)
})

is better than binding to the document for instance.

This question may help you understand

Direct vs. Delegated - jQuery .on()

score 1 · Answer 3 · answered Mar 30 '16 at 19:08

1

I wanted to share how you can use this to change a attribute of the button, because it took me some time to figure it out...

For example in order to change it's background to yellow:

$("#"+String(this.id)).css("background-color","yellow");

answered Mar 30 '16 at 19:08

frankenapps

5,800
6
28
69

score 0 · Answer 4 · answered Sep 08 '13 at 05:43

0

You can get the id of clicked one by this code

$("span").on("click",function(e){
    console.log(e.target.Id);
});

Use .on() event for future compatibility

answered Sep 08 '13 at 05:43

Hemal

3,682
1
23
54

How to get the id of the element clicked using jQuery

4 Answers4

Linked

Related