The 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);
Parameter: 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);
}
$(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>
<p>Click me!</p>
</body>
</html>
|
Output:
