Getting the ID of the element that fired an event

1013

Is there any way to get the ID of the element that fires an event?

I'm thinking something like:

_x000D_
_x000D_
$(document).ready(function() {_x000D_
  $("a").click(function() {_x000D_
    var test = caller.id;_x000D_
    alert(test.val());_x000D_
  });_x000D_
});
_x000D_
<script type="text/javascript" src="starterkit/jquery.js"></script>_x000D_
_x000D_
<form class="item" id="aaa">_x000D_
  <input class="title"></input>_x000D_
</form>_x000D_
<form class="item" id="bbb">_x000D_
  <input class="title"></input>_x000D_
</form>
_x000D_
_x000D_
_x000D_

Except of course that the var test should contain the id "aaa", if the event is fired from the first form, and "bbb", if the event is fired from the second form.

This question is tagged with javascript jquery dom-events

~ Asked on 2008-09-07 08:09:38

23 Answers


1336

In jQuery event.target always refers to the element that triggered the event, where event is the parameter passed to the function. http://api.jquery.com/category/events/event-object/

$(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");
    });
});

~ Answered on 2008-09-07 19:02:37


180

For reference, try this! It works!

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

~ Answered on 2010-09-02 08:01:42


104

Though it is mentioned in other posts, I wanted to spell this out:

$(event.target).id is undefined

$(event.target)[0].id gives the id attribute.

event.target.id also gives the id attribute.

this.id gives the id attribute.

and

$(this).id is undefined.

The differences, of course, is between jQuery objects and DOM objects. "id" is a DOM property so you have to be on the DOM element object to use it.

(It tripped me up, so it probably tripped up someone else)

~ Answered on 2012-11-06 13:38:16


93

For all events, not limited to just jQuery you can use

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

Where event.target fails it falls back on event.srcElement for IE. To clarify the above code does not require jQuery but also works with jQuery.

~ Answered on 2012-07-19 14:23:14


59

You can use (this) to reference the object that 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.

Here is where you can learn more: http://remysharp.com/2007/04/12/jquerys-this-demystified/

~ Answered on 2008-09-07 08:12:38


29

I generate a table dynamically out a database, receive the data in JSON and put it into a table. Every table row got a unique ID, which is needed for further actions, so, if the DOM is altered you need a different approach:

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

~ Answered on 2011-09-12 14:14:16


19

Element which fired event we have in event property

event.currentTarget

We get DOM node object on which was set event handler.


Most nested node which started bubbling process we have in

event.target

Event object is always first attribute of event handler, example:

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

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

});

More about event delegation You can read in http://maciejsikora.com/standard-events-vs-event-delegation/

~ Answered on 2016-10-14 13:04:43


12

The source element as a jQuery object should be obtained via

var $el = $(event.target);

This gets you the source of the click, rather than the element that the click function was assigned too. Can be useful when the click event is on a parent object EG.a click event on a table row, and you need the cell that was clicked

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

~ Answered on 2012-03-22 15:41:23


8

this works with most types of elements:

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

~ Answered on 2018-10-18 19:28:09


7

You can try to use:

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

~ Answered on 2012-11-03 17:40:44


6

In the case of delegated event handlers, where you might have something like this:

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

and your JS code like so:

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

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

You'll more than likely find that itemId is undefined, as the content of the LI is wrapped in a <span>, which means the <span> will probably be the event target. You can get around this with a small check, like so:

$(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
    });
});

Or, if you prefer to maximize readability (and also avoid unnecessary repetition of jQuery wrapping calls):

$(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
    });
});

When using event delegation, the .is() method is invaluable for verifying that your event target (among other things) is actually what you need it to be. Use .closest(selector) to search up the DOM tree, and use .find(selector) (generally coupled with .first(), as in .find(selector).first()) to search down it. You don't need to use .first() when using .closest(), as it only returns the first matching ancestor element, while .find() returns all matching descendants.

~ Answered on 2015-06-18 20:35:31


6

Use can Use .on event

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

~ Answered on 2016-09-24 06:55:19


5

This works on a higher z-index than the event parameter mentioned in above answers:

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

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

This way you will always get the id of the (in this example li) element. Also when clicked on a child element of the parent..

~ Answered on 2013-11-09 19:58:29


4

Just use the this reference

$(this).attr("id")

or

$(this).prop("id")

~ Answered on 2016-08-04 08:51:05


4

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);
}

Working JSFiddle here.

~ Answered on 2015-01-30 22:21:56


3

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

~ Answered on 2019-08-21 03:11:47


3

this.element.attr("id") works fine in IE8.

~ Answered on 2013-06-04 07:47:15


2

Pure JS is simpler

aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}

_x000D_
_x000D_
aaa.onclick = handler;
bbb.onclick = handler;

function handler() { 
  var test = this.id; 
  console.log(test) 
}
_x000D_
<form class="item" id="aaa">
  <input class="title"/>
</form>
<form class="item" id="bbb">
  <input class="title"/>
</form>
_x000D_
_x000D_
_x000D_

~ Answered on 2020-06-26 20:26:46


2

Both of these work,

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

and

alert(this.id);

~ Answered on 2014-02-10 18:01:46


1

You can use the function to get the id and the value for the changed item(in my example, I've used a Select tag.

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

~ Answered on 2018-02-05 11:23:13


0

In case of Angular 7.x you can get the native element and its id or properties.

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

html:

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

~ Answered on 2019-02-26 21:13:59


0

I'm working with

jQuery Autocomplete

I tried looking for an event as described above, but when the request function fires it doesn't seem to be available. I used this.element.attr("id") to get the element's ID instead, and it seems to work fine.

~ Answered on 2018-11-11 17:39:34


0

There's plenty of ways to do this and examples already, but if you need take it a further step and need to prevent the enter key on forms, and yet still need it on a multi-line textarea, it gets more complicated. The following will solve the problem.

<script>
    $(document).ready(function() {
      $(window).keydown(function(event){
        if(event.keyCode == 13) {
           //There are 2 textarea forms that need the enter key to work.
            if((event.target.id="CommentsForOnAir") || (event.target.id="CommentsForOnline"))
            {
                // Prevent the form from triggering, but allowing multi-line to still work.
            }
            else
            {
                event.preventDefault();
                return false;
            }         
        }
      });
    });
</script>

<textarea class="form-control" rows="10" cols="50" id="CommentsForOnline" name="CommentsForOnline" type="text" size="60" maxlength="2000"></textarea>

It could probably be simplified more, but you get the concept.

~ Answered on 2020-11-16 07:55:31


Most Viewed Questions: