Skip to content
Related Articles

Related Articles

How to attach a click and double-click event to an element in jQuery ?
  • Last Updated : 25 Mar, 2021

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 used. These events are attached with 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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to attach a click and double-click
        event to an element in jQuery?
    </title>
  
    <script src=
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :