How to attach a click and double-click event to an element in jQuery ?

Last Updated : 06 Jun, 2023

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>