The jQuery bind() method is used to attach one or more event handlers for selected elements. This method specifies a function to run when an event occurs.
Syntax
$(selector).bind(event, data, function);
Parameters
It accepts three parameters that are described 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.
Example 1: In this example, "click" events are attached to the given paragraph using bind() method.
HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { $(".paragraph").bind("click", function () { alert("Paragraph is Clicked"); }); }); </script> <style> .paragraph { width: 190px; margin: auto; padding: 20px 40px; border: 1px solid black; } </style> </head> <body> <p class="paragraph">Welcome to GeeksforGeeks</p> </body> </html> Output:
Example 2: In this example, the "click" event is added but this time data is also passed to the bind() method.
HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> function handlerName(e) { alert(e.data.msg); } $(document).ready(function () { $(".paragraph").bind("click", { msg: "Paragraph is Clicked." }, handlerName) }); </script> <style> .paragraph { width: 190px; margin: auto; padding: 20px 40px; border: 1px solid black; } </style> </head> <body> <p class="paragraph">Welcome to GeeksforGeeks</p> </body> </html> Output: