CODEWITHSUNDEEP
javascriptjquery
ρss
ρss

Reputation: 5315

How to get id of an element in jQuery?

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.

Upvotes: 1

Views: 147

Answers (3)

Mr X
Mr X

Reputation: 1739

<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.

Upvotes: 1

Arend
Arend

Reputation: 3772

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.

Upvotes: 1

dotty
dotty

Reputation: 41523

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>.

Upvotes: 1

Related Questions