How to Capture Click Events on Selected Toolbar Buttons Using jQuery ?
Last Updated :
28 Apr, 2025
When working with web applications and interfaces, capturing click events on toolbar buttons is a common task. jQuery simplifies this process by providing a convenient way to handle such events. There are several approaches for capturing click events on toolbar buttons using jQuery which are as follows:
Syntax:
$(document).ready(function(){
$("#buttonID").click(function(){
// Your code to be executed on button click
});
});One can assign unique IDs to each toolbar button and capture click events based on those IDs. This approach involves directly selecting buttons by their unique IDs and attaching individual click event handlers to each button. It provides a straightforward method for capturing click events on specific toolbar buttons, allowing you to execute custom actions for each button separately.
Example: To illustrate the use of jQuery to capture click events on two buttons, "Button 1" and "Button 2." by assigning a click event handler to each button ID.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toolbar Button Click</title>
<script src=
"https://code.jquery.com/jquery-3.6.4.min.js">
</script>
</head>
<body>
<button id="btnOne">Button 1</button>
<button id="btnTwo">Button 2</button>
<script>
$(document).ready(function () {
$("#btnOne").click(function () {
alert("Button 1 clicked!");
});
$("#btnTwo").click(function () {
alert("Button 2 clicked!");
});
});
</script>
</body>
</html>
Output:
Capture click event on the selected toolbar button using JqueryAssigning a common class to multiple buttons simplifies event handling in jQuery. By sharing a class, one can efficiently capture click events on all corresponding buttons. This approach enhances code organization and promotes a streamlined method for executing actions consistently across the buttons within the specified class.
Example: Capturing click events on toolbar buttons using shared class on buttons.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toolbar Button Click</title>
<script src=
"https://code.jquery.com/jquery-3.6.4.min.js">
</script>
</head>
<body>
<button class="toolbar-btn">Button A</button>
<button class="toolbar-btn">Button B</button>
<button class="toolbar-btn">Button C</button>
<script>
$(document).ready(function () {
$(".toolbar-btn").click(function () {
var btnText = $(this).text();
alert(btnText + " clicked!");
});
});
</script>
</body>
</html>
Output:
Capturing Click Events on Toolbar Buttons Using Button ClassesUsing Attribute Selectors
By assigning a common attribute (e.g., data-button-type) to buttons, jQuery's attribute selector efficiently captures click events on all buttons sharing that attribute. This example demonstrates the uniform handling of click events, providing a flexible approach for selecting and executing actions on buttons with shared attributes within a toolbar.
Example: To demonstrate utilizing JQuery, a click event handler is assigned to all buttons sharing this attribute which displays an alert when a button is clicked.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toolbar Button Click</title>
<script src=
"https://code.jquery.com/jquery-3.6.4.min.js">
</script>
</head>
<body>
<button data-action="btnAction1">Button X</button>
<button data-action="btnAction2">Button Y</button>
<button data-action="btnAction3">Button Z</button>
<script>
$(document).ready(function () {
$("button[data-action]").click(function () {
var btnAction = $(this).data("action");
alert(btnAction + " clicked!");
});
});
</script>
</body>
</html>
Output:
Capturing click event on the toolbar buttons using the Attribute selector.
Similar Reads
How to trigger click on select box on hover using jQuery ? In this article, we are going to learn, how we can trigger a click event on the select box or drop-down menu while hovering the mouse using jQuery.For creating such behavior for a select box, we will use the jQuery attr() method. This method is used to set or return the attributes and values of the
2 min read
How to get the ID of the clicked button using JavaScript/jQuery ? To get the ID of a clicked button using JavaScript/jQuery means identifying which specific button was clicked within a webpage. This is useful when multiple buttons exist, and you need to distinguish between them based on their unique ID for further processing.So, to get the ID of the clicked button
3 min read
How to get the ID of the clicked button using JavaScript/jQuery ? To get the ID of a clicked button using JavaScript/jQuery means identifying which specific button was clicked within a webpage. This is useful when multiple buttons exist, and you need to distinguish between them based on their unique ID for further processing.So, to get the ID of the clicked button
3 min read
How to fire an event on file select using jQuery ? Given an HTML document and the task to fire an event when a file is selected using jQuery. The JQuery change() method is used to fire an event when file is selected. Using change() method: It is used to change the value of the input fields. This method works with "input, textarea and select" element
2 min read
How to fire an event on file select using jQuery ? Given an HTML document and the task to fire an event when a file is selected using jQuery. The JQuery change() method is used to fire an event when file is selected. Using change() method: It is used to change the value of the input fields. This method works with "input, textarea and select" element
2 min read
How to make Basic toolbars using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Basic toolbars using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet"
1 min read