How to get id of an element in jQuery?

Question

I am new to jQuery and I am currently trying to get id of an element that has been clicked in the page.

As far as I have read, I know that we can get an id of current element by using $(this).attr("id");

But I am not gettting the id instead it says undefined.

HTML code:

<html>
    <body>
        <form action="#">
            <a href='#' id="1st">First</a></br>
            <a href='#' id="2nd">Second</a></br>
            <p id='3rd'>Test text</p>
        </form>
        <script type="text/javascript" src="jquery.js"> </script>
        <script type="text/javascript" src="code.js"> </script>
    </body>
</html>

code.js(jQuery code):

$(document).click(function(){
    alert($(this).attr("id"));
    });

How ever the following code returns the id perfectly:

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

Can someone please explain why is this happening & what have I misunderstood? Thanks.

You're binding the event handler to the `document`, So `this` refers to the `document`, and the `document` doesn't have an `id`. — Jason P, Aug 06 '14 at 13:18
Incidentally, `this.id` works just as well as, and slightly faster than, `$(this).attr('id')` — Blazemonger, Aug 06 '14 at 13:19
@JasonP if I do `` then the second jquery script will return me `mainpage` when I click on the page. But still the first jquery code does return `undefined`. — ρss, Aug 06 '14 at 13:19
@Blazemonger Is this the reason why first jQuery code returns `undefinied` even if I click on an elemnt or on a page. But why is this not the case in second script? — ρss, Aug 06 '14 at 13:23
@ρss In a jQuery event handler, `this` refers to the element that the handler was bound to (in this case, `document`). `event.target` always refers to the element that was the initial target of the event. — Jason P, Aug 06 '14 at 13:27
@JasonP Thanks, Does this doesn't gives an id to the document? If it gives an id then shouldn't my first jquery code return `mainpage` when I click on the page but not on any element? — ρss, Aug 06 '14 at 13:30
Ok, but second script return `mainpage` if I click on the page? Please exuse me. I just want to clear my doubts. :) — ρss, Aug 06 '14 at 13:34
Because that's what you clicked (and therefore what is referenced by `event.target`. If you click on `Test text` I would expect the alert to say `3rd`. — Jason P, Aug 06 '14 at 13:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58789/discussion-between-ss-and-jason-p). — ρss, Aug 06 '14 at 13:36

score 1 · Accepted Answer · answered Aug 06 '14 at 13:26

1

As Jason P pointed out in the comments, you're binding the .click() event to the $(document) so all references to $(this) will refer to the $(document). Since you're requesting the id of $(document) you'll get a undefined error because there's no id.

If you're trying to get the id of the <a>s then you'll need to bind the .click() event to that, like:

$("a").click(function(){
     alert( $(this).attr("id") );
});

The $(this) is now referring to the <a>.

Be warned that this'll attach the .click() event to every <a>.

answered Aug 06 '14 at 13:26

dotty

40,405
66
150
195

This solution won't work if I click on the paragraph text! I am not looking for this solution. Thanks any ways. – ρss Aug 06 '14 at 13:36
Then bind the `.click()` event to the `$("p")`, or if you're worried bind `.click()` to everything with `$("*")`. – dotty Aug 06 '14 at 13:38
Or even better use bind `.click()` to `$("[id]")` which will bind the event to any element which has an ID. – dotty Aug 06 '14 at 13:39
Yes, now you gave a good solution. Could please have a look at my comments with Jason. Can you please clear my doubt on that? – ρss Aug 06 '14 at 13:42
I don't think I can explain it any clearer than how Jason explained it "In a jQuery event handler, $(this) refers to the element that the handler was bound to (in this case, document). event.target always refers to the element that was the initial target of the event." – dotty Aug 06 '14 at 13:44
Yes, exactly this is what I didn't understand. :( Ok, I try to ask. In my first jquery code whom does the $(this) refer to? – ρss Aug 06 '14 at 13:48
`$(this)` refers to the element that the event was called from. So in my example `$(this)` refers to `$("a")`, in your example `$(this)` refers to `$(document)`. – dotty Aug 06 '14 at 13:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58792/discussion-between-ss-and-dotty). – ρss Aug 06 '14 at 13:53
I accept this answer because we had a discussion in chat and I finally cleared my doubt. Thanks to Jason too. – ρss Aug 06 '14 at 14:13

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

It's because $(this) is referring to document (what the event is bound to). The event.target parameter in the callback refers to the element that was clicked.

If you want to use this in combination with .attr(), you can wrap event.target to a jquery object and call attr('id')

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

See jsfiddle: http://jsfiddle.net/85HK4/1/

PS: What you witness here is related to event bubbling. See: http://www.quirksmode.org/js/events_order.html and What is event bubbling and capturing?.

In short: event.target refers to the element you clicked on, this refers to the element you bound the event to.

edited May 23 '17 at 10:33

Community

1
1

answered Aug 06 '14 at 13:28

Arend

3,741
2
27
37

Probably be best to use `$("a").click()` rather than getting him confused with `event.target`. – dotty Aug 06 '14 at 13:28
Might be one solution - yes, since I'm not really sure what the goal of this whole exercise is, I decided to answer his question as precise enough - he asked mainly for an explanation why $(this).attr("id") does not work. – Arend Aug 06 '14 at 13:35

score 1 · Answer 3 · answered Aug 06 '14 at 13:48

<script>
$(document).ready(function() {

   $(".well").mouseenter(function(e) {
        alert($(this).attr("id"));
    });

  });

</script>

<div class="container">
<h2 class="text-info"> Check</h2>
        <div class="well" id="first">
            <a href='#' id="1st" class="text-warning">First</a></br>
            <a href='#' id="2nd">Second</a></br>
        </div>
</div>

Here $this refers to any event occuring like, mouseenter, click, mouseup, etc binded to some dom element which you can select with any class, id or any attribute.

and $this which binds the event and dom to revoke the called request. Here its the id dom element with class: 'well'

Now if you include, second div with same class. Like

<div class="well" id="second">
            <a href='#' id="1st" class="text-warning">First</a></br>
            <a href='#' id="2nd">Second</a></br>
</div>

Each class will check the event occurred with its dom. So both event and selector should match to give the desired result and $this binds the both and reads accordingly to give the result.

In second case when you mouse over the second div it will alert second.

Thanks, In my first jquery code whom does the $(this) refer to? — ρss, Aug 06 '14 at 13:53
$(this) in first case could not bind any target to display the requested output. and in second case event.target always refers to the element that triggered the event — Mr X, Aug 06 '14 at 14:15

How to get id of an element in jQuery?

3 Answers3

Related