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
Video Tutorial
Watch video tutorial on How To Get ID of Clicked Element using JQuery.
Also Read Get ID of Clicked Element using JavaScript.