How to attach a click and double-click event to an element in jQuery ? Last Updated : 06 Jun, 2023 Comments Improve Suggest changes Like Article Like Report In this article, we will see how to attach a click and double-click event to an element in jQuery. To attach click and double-click events, click and dbclick events are used. These events are attached with the bind() method. This method is used to attach one or more event handlers for selected elements and this method specifies a function to run when an event occurs. Also, we use appendTo() method to append the result to an element. Syntax: $(element).bind(click, function() { }) $(element).bind(dbclick, function() { }) Example: In this example, we are using the above-mentioned methods. HTML <!DOCTYPE html> <html> <head> <title> How to attach a click and double-click event to an element in jQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { $(".clickable_ele").bind("click", function () { $("<h4>Single click Event called</h4>") .appendTo(".res"); }); $(".clickable_ele").bind("dblclick", function () { $("<h4>Double click Event called</h4>") .appendTo(".res"); }); }); </script> <style> body { text-align: center; } h1 { color: green; } .clickable_ele { font-size: 20px; font-weight: bold; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h3> How to attach a click and double-click event to an element in jQuery? </h3> <div class="clickable_ele"> Clickable Element </div> <div class="res"></div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to attach a click and double-click event to an element in jQuery ? V vkash8574 Follow Improve Article Tags : Web Technologies JQuery Web technologies HTML-Tags CSS-Properties jQuery-Questions jQuery +3 More Similar Reads How to bind an event on an element but not on its children in jQuery ? In this article, we will learn how to bind an event on an element but not on its children in jQuery. We want to add an event on the parent element but not on the child element. Approach: We can do this task in the following steps: First, we add a click event on the div element that contains a paragr 2 min read How to Double click on a div element to toggle background color in jQuery ? In this article, we will see how to make a double click event on a paragraph element to toggle background color in jQuery. To toggle the background color of a div element on double-click, toggleClass() method is used. The toggleClass() method is used to toggle or change the class which attached with 1 min read How to run a code on double-click event in jQuery ? In this article, we will see how to run a code after double clicked the element using jQuery. To run the code on double clicked we use dblclick() method. This method is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked. Syntax: $(sel 1 min read How to run a code on click event in jQuery ? In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h 1 min read How to attach a method to HTML element event using jQuery ? In this article, we are going to learn, how can we attach a method to an HTML element event using jQuery.There are various events like click(), mouseenter(), mouseout(), etc which are available in jQuery. For attaching a method to an HTML elements event, we will need a jQuery method on(), which will 2 min read How to attach more than 1 event handlers to elements in jQuery ? With the help of event handlers, we can set the particular event available in jQuery on the HTML element. In jQuery, a number of events are available such as click(), mouseover(), dblclick(), etc. In this article, we are going to learn how we can attach more than one event handler to the elements. I 2 min read How to Click on header to add another header in jQuery ? In this article, we will see how to add a new header element after clicking the existing header elements in jQuery. To add the new header element, the delegate() method is used. Syntax: $(selector).delegate("Selected_elements", function() { $(this).after("content"); }) Here, we use delegate() method 1 min read How to attach an event to an element which should be executed only once in JavaScript ? In this article, we will learn how to attach an event to an element which should be executed only once. There are two approaches that can be used here: Approach 1: In this approach, we will be using the jQuery one() method. This method attaches an event to the element with the specified selector. It 3 min read How to handle events in dynamically created elements in jQuery ? When we want to bind any event to an element, normally we could directly bind to any event of each element using the on() method. Example 1: This example using jQuery on() method to add paragraph element dynamically. html <!DOCTYPE html> <html> <head> <title> How to handle ev 2 min read How to add dbclick() on right click in jQuery? The jQuery dblclick() method is used to detect whenever a particular element is double-clicked. This method only detects left mouse button double clicks and not the right mouse button double clicks. In this article, we will see how to simulate the double right mouse click in jQuery. Approach: There 3 min read Like