Skip to content
Related Articles

Related Articles

jQuery bind() Method

Improve Article
Save Article
  • Last Updated : 17 Nov, 2022
Improve Article
Save Article

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

Syntax:

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

Parameter: It accepts three parameters that are specified below-

  1. event: This is an event type which is passed to the selected elements.
  2. data: This is the data which can be shown over the selected elements.
  3. function: This is the function which is perform by the selected elements.

Note This method has deprecated.

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

Example 1: In the below code,”click” event are attached with 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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!