Open In App

jQuery bind() method

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery bind() is an inbuilt method that is used to attach one or more event handlers for selected elements and this method specifies a function to run when an event occurs. 

Syntax:

$(selector).bind(event, data, function);

Parameters:

It accepts three parameters that are specified below-

  • event: This is an event type that is passed to the selected elements.
  • data: This is the data that can be shown over the selected elements.
  • function: This is the function that is performed by the selected elements.

Note This method has been deprecated.

jQuery codes to show the working of bind() method:

Example 1: In the below code,”click” events are attached to the given paragraph using this method. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
 
    <script>
        $(document).ready(function () {
            $("p").bind("click", function () {
                alert("Given paragraph was clicked.");
            });
        });
    </script>
 
    <style>
        p {
            display: block;
            padding: 50px;
            width: 280px;
            border: 2px solid green;
        }
    </style>
</head>
 
<body>
    <p>Click me!</p>
</body>
 
</html>


Output: 

Example 2: In the below code, same “click” event is added but this time data is also passed to this method. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <script src=
    </script>
   
    <script>
        function handlerName(e) {
            alert(e.data.msg);
        }
        <!--Here data is passing along with a function in
            bind method-->
                $(document).ready(function () {
                    $("p").bind("click", {
                        msg: "You just clicked the paragraph!"
                    }, handlerName)
                });
    </script>
   
    <style>
        p {
            display: block;
            padding: 50px;
            width: 280px;
            border: 2px solid green;
        }
    </style>
</head>
   
<body>
    <!--A pop will appear after clicking
        on this paragraph-->
    <p>Click me!</p>
</body>
   
</html>


Output:



Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads