jQuery bind() Method
Last Updated :
22 Apr, 2024
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:
Share your thoughts in the comments
Please Login to comment...