Get ID of Clicked Element using JQuery

In this tutorial we will see How To Get ID of Clicked Element using JQuery. The JQuery event.target property is used which returns the DOM element that triggered the event.

Table of Contents

HTML Code

HTML Code is given below, This code contains button elements, Whichever button is clicked, it's id will be displayed.

<!DOCTYPE html>
<html>
<head>
    <title>Get ID of Clicked Element using JQuery</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <button id='1'>Button 1</button>
    <button id='2'>Button 2</button>
</body>
</html>

JQuery Code

JQuery Code is given below, In this code the JQuery event.target property is used which will return the clicked button element.

Whenever button is clicked it will execute the function and even.target property will return the id of the clicked button.

The Id of clicked button is then displayed using alert method.

<script>
$(document).ready(function(){
$('button').click(function(event){
alert(event.target.id);
});
});
</script>

Demo

Check Demo

Video Tutorial

Watch video tutorial on How To Get ID of Clicked Element using JQuery.

Also Read Get ID of Clicked Element using JavaScript.