Tutorialspoint.dev

jQuery | bind() with Examples

The bind() is an inbuilt method in jQuery which 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.

Return Value: It returns all the modification made on the selected element.

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

Code #1:
In the below code,”click” event are attached with the given paragraph using this method.

<html>
  
<head>
              jquery/3.3.1/jquery.min.js"></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:
Before clicking the “Click me” box-

After clicking the “Click me” box-

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

<html>
  
<head>
          jquery/3.3.1/jquery.min.js"></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:
Before clicking the “Click me” box-

After clicking the “Click me” box-



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter