How to use Button IDs In JQuery
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 Jquery
How to Capture Click Events on Selected Toolbar Buttons Using jQuery ?
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:
Table of Content
- Using Button IDs
- Using Button Classes
- Using Attribute Selectors
Syntax:
$(document).ready(function(){
$("#buttonID").click(function(){
// Your code to be executed on button click
});
});