In a regular jQuery click handler, use this.id to get the ID of the element whose handler is running. If you need the element that actually originated the click—perhaps a nested icon inside a button—use event.target.id instead.
Get the ID in a directly attached click handler
Attach the handler with .on(), then read the element’s native id property. In a regular function handler, this refers to the element running the handler. You can also use event.currentTarget for that element, or wrap this in jQuery to call jQuery methods.
As an Amazon Associate I earn from qualifying purchases.
$('#myButton').on('click', function (event) {
console.log(this.id); // Native DOM property
console.log(event.currentTarget.id); // Element handling the event
console.log($(this).attr('id')); // jQuery method
});For a direct handler, this and event.currentTarget ordinarily identify the same element. The jQuery API documents event.currentTarget and the jQuery() function used to wrap a DOM element.
Choose the right event property
“Clicked element” can mean either the element that received the original click or the element whose handler is running. These are not always the same: clicking a child element can initiate an event that bubbles to a parent handler.
#1 Best Overall
| Use | What it identifies | Example |
|---|---|---|
event.target |
The element that initiated the event; it may be a nested child. | event.target.id |
event.currentTarget |
The element whose handler is currently running. | event.currentTarget.id |
this |
In a regular jQuery handler, the DOM element whose handler is running. | this.id |
$(this).attr('id') |
The same handler element, accessed through a jQuery method. | $(this).attr('id') |
The API defines event.target as the DOM element that initiated the event. Choose it when you want the ID of the original source, not necessarily the parent element handling the click.
Get the matched element in a delegated handler
Delegation lets an ancestor handle clicks that bubble up from descendants matching a selector. In this example, the handler is attached to #list but runs for matching buttons. Within the handler, this and event.currentTarget refer to the matched button; event.target may refer to a nested child inside it.
$('#list').on('click', 'button', function (event) {
console.log(this.id); // Matching button's ID
console.log(event.currentTarget.id); // Matching button
console.log(event.target.id); // Element that originated the click
});The jQuery guide to event delegation explains the pattern. For practical use, choose a nearby stable ancestor as the delegation point: the .on() documentation notes that delegated handlers placed high in the document tree may require extra selector comparisons.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Handle arrow functions correctly
Arrow functions do not have their own this, so do not rely on this.id in an arrow-function handler. Use the event argument’s currentTarget instead:
Rank #3
$('#myButton').on('click', (event) => {
console.log(event.currentTarget.id);
});This follows JavaScript’s lexical this behavior; event.currentTarget still identifies the element whose handler is running.
Use .on() for event binding
The .on() method was added in jQuery 1.7, and the jQuery Learning Center describes it as the preferred event-binding practice for jQuery 1.7 and later. The API examples currently load jQuery 4.0.0. See the official event-handling guide for the binding guidance.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
