ansaurus

Question

Getting the ID of the element that fired an event using JQuery

Answer 1

+13 A:

You can use (this) to reference the object the fired the function.

'this' is a DOM element when you are inside of a callback function (in the context of jQuery), for example, being called by the click, each, bind, etc. methods.

Espo 2008-09-07 08:12:38

'this' is true. :]

matt lohkamp 2008-11-20 04:17:12

Answer 2

+24 A:

In jQuery event.target always refers to the element that triggered the event, where 'event' is the parameter passes to the function. http://docs.jquery.com/Events_(Guide)

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

Note also that 'this' will also work, but that it is not a jQuery object, so if you wish to use a jQuery function on it then you must refer to it as '$(this)', e.g.:

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

samjudson 2008-09-07 19:02:37

Wow! Thanks. Didn't realize that jQuery abstracted that so well. You rock! I would think it would still have the difference between (this) and (event.target) -- being object you bound the event to vs. the object that received the event.

Hafthor 2008-09-08 17:12:55

Unfortunately, event.target doesn't permit access to its custom attributes. To do that, one must use $(this).attr("organization:thingy");.

Zian Choy 2009-09-08 07:00:03

thanks for the diff between this and $(this)

Michel 2009-12-17 14:53:30

Answer 3

+3 A:

Very helpful code! I was able to use an alert to show the id of what was clicked! But Im trying to show/hide elements based on what is clicked.

So for example, if you click link 1 (id="1") - all div's with id="1" will show, but div's with id="2" will be hidden. I can get everything to show, but not just id="1".

Here is my code, what am I doing wrong?

$(event.target.id)show(); $(event.target.id:not).hide();

Here is the full code:

 //grab values from attributes assigned in xsl
 var qtID = $(this).attr("id");

 // make id to show comment (#23453-3djis-im37vk9-fkifhf7)
 var ccID = '#' + qtID;


 //show only comments of matching ccID that were clicked
 $("#item-comments-listing").show();
 $(event.target.id)show();
 $(event.target.id:not).hide();

Any ideas?

jrutter 2008-11-20 02:00:43

thanks a lot!! i was looking for $(this).attr("id");

Deepak Yadav 2010-02-12 23:25:24

Answer 4

A:

Hellow every one how to deal when the same id reapeats as i have problem in the code.

<script type="text/javascript">
  $(document).ready(function(){
    $("input").click(
      function(){
        alert(this.id);
        $('#comments'+this.id).show();
    }
  );
});

.comments{ width:500px; height:350px; background:#06F; display:none; }

box 1 box 2 box 3

liaqat 2010-08-09 13:17:33

Answer 5

A:

I'm a tad late. lol. For reference, try this! It works!

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

        });

Gemma 2010-09-02 08:01:42

ansaurus

tags:

views:

answers:

Getting the ID of the element that fired an event using JQuery

related questions