Home »
jQuery »
jQuery Examples
jQuery bind() vs on() Methods
In this tutorial, let's discuss in detail about the bind() and on() methods of jQuery.
Submitted by Pratishtha Saxena, on August 11, 2022
1) jQuery bind() Method
It attaches a handler to an event for the elements. But here, the elements should exist previously (initially). If the element is added afterward then this method will not execute the function attached to the event handler.
Syntax:
$(selector).bind(event, function());
Code to demonstrate the use of bind() method in jQuery
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click Here</button>
</body>
</html>
jQuery:
var x = 0;
$(document).ready(function() {
$("button").bind("click", function() {
$("p").css("background", "yellow");
});
});
Output:
2) jQuery on() Method
It is a built-in method of jQuery. The on() method also attaches an event handler for the elements. It not only attaches the event handler to the present elements, but also to the elements which can be generated in near future. Unlike the bind() method, if the element is added afterward or in the future then also this method will execute the function attached to the event handler.
Syntax:
$(selector).on(event, function());
Code to demonstrate the use of on() method in jQuery
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Click Here</button>
</body>
</html>
jQuery:
var x = 0;
$(document).ready(function() {
$("button").on("click", function() {
$("p").css("background", "yellow");
});
});
Output:
Difference between bind() and on() Methods
The on() method is the preferred method for attaching event handlers to a document. For earlier versions, the bind() method is used for attaching an event handler directly to elements.