How to Capture Click Events on Selected Toolbar Buttons Using jQuery ?
Last Updated :
12 Feb, 2024
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=
</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 Jquery
Assigning 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=
</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 Classes
Using 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=
</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.
Share your thoughts in the comments
Please Login to comment...