EDUCBA

Home Software Development Software Development Tutorials Top Differences Tutorial jQuery bind vs on

jQuery bind vs on

Updated June 2, 2023

jQuery bind vs on

Difference between jQuery bind vs on

jQuery bind method:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

The jQuery bind is an inbuilt method to handle one or more events of the element. The jQuery bind method is working when an event has occurred of the given element. The jQuery bind is a function working on several current elements of the HTML page. The jQuery bind method is the event handler of the current elements like click and alert.

jQuery on method:

The jQuery on method is a replacement of the bind method to handle more than one event. The jQuery on method is working when an event has occurred in the given element. The jQuery is a function working on several current and future elements of the HTML page. The jQuery on method is the event handler of the elements like click and alert.

Head to Head Comparison Between jQuery bind vs on (Infographics)

Below are the top differences between jQuery bind vs on:

jQuery bind-vs-on-info

Key Differences

There have many similarities and differences in the jQuery bind() and jQuery on() method. The difference between the jQuery bind() and jQuery on() method is given below.

  • The jQuery bind() method is the handle event of the current element in the HTML file. The jQuery on() method handles event current and future elements in the HTML page.
  • The jQuery bind() method supports an old version of jQuery. The jQuery on() method supports the current and latest version of jQuery.
  • The jQuery on() method is popular and replacement of the bind() method.
  • The jQuery bind() method is deprecated by the developer for the latest version of jQuery.
  • The jQuery bind() method works on only selected elements. The jQuery on() method works on the selected element and their children’s element.
  • The jQuery on() method is replacement of the bind(), live(), and delegate method(). The jQuery bind() is only more than one event handler method.

Comparison Table of JQuery bind method vs JQuery on method

The below table displays a brief description of the jQuery bind method and jQuery on method.

Features JQuery bind method JQuery on method
Definition The jQuery bind method is handling one or multiple events of the jQuery element. The jQuery on method is handling one or multiple events of the jQuery element.
Function The JQuery bind method is the Event handler of the elements. The jQuery on method is the Event handler of the elements.
Syntax 
$('jQuery selector').bind( event type, [data], event handler function)
 
$(selector).on(event type, [data or child selector], event handler function)
Parameter The jQuery bind method required parameters. The jQuery on method required parameters.
Parameters description
  • JQuery selector: This is an element of the HTML tags or attributes such as class, id, or tag.
  • Event type: This is a DOM event for interaction with a user. Example: click, mouse hover, submits, etc.
  • Event handler function: This helps to create functions and handle data.
  • JQuery selector: This is an element of the HTML tags or attributes such as class, id, or tag.
  • Event type: This is a DOM event for interaction with a user. Example: click, mouse hover, submits, etc.
  • Data or child selector: This method can use the children element of the HTML page.
  • Event handler function:  This helps to create function and handle data.
JQuery version
  • The jQuery bind method is the oldest event handler method.
  • This is works on jQuery 1.0.x files.
  • The jQuery bind method disapproves in jQuery3.0 or the latest file.
  • The jQuery bind method is the latest event handler method.
  • This is the replacement of the bind() method.
  • The jQuery on method popular in jQuery3.0 or latest file.
JQuery file 
<script
src =
"https://ajax.googleapis.com/ajax/libs/jQuery/
1.11.2/jQuery.min.js">
</script>
 
<script
src =
"https://ajax.googleapis.com/ajax/libs/jQuery/
3.5.1/jQuery.min.js">
</script>
How does work
  • Put required jQuery file to work jQuery bind method.
  • Create HTML elements and tags.
  • Place jQuery bind() syntax in the script tag.
  • Use jQuery selector and events.
<script>
$(document).ready( function() {
$( "p" ).bind( "click", function() {
document.write(" jQuery bind() method working here... ");
alert(" jQuery bind() method working here... ");
});
});
</script>

 
  • Put required jQuery file to work jQuery on method.
  • Create HTML elements and tags.
  • Place jQuery bind() syntax in the script tag.
  • Use jQuery selector and events.
<script>
$(document).ready( function() {
$( "p" ).on( "click", function() {
document.write(" jQuery on() method working here... ");
alert(" jQuery on() method working here... ");
});
});
</script>
Example 
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/1.11.2/jQuery.min.js">
</script>
</head>
<body>
<p>
<button> jQuery bind </button>
</p>
<script>
$(document).ready( function() {
$( "p" ).bind( "click", function() {
document.write(" jQuery bind() method working here... ");
});
});
</script>
</body>
</html>
 
<!DOCTYPE>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"> </script>
</head>
<body>
<p>
<button> jQuery on </button>
</p>
<script>
$(document).ready( function() {
$( "p" ).on( "click", function() {
document.write(" jQuery on() method working here... ");
});
});
</script>
</body>
</html>
Output
  • Before event output
  • After event output
  • Before event output
  • After event output
Advantages and disadvantage
  • The jQuery bind() method supports jQuery old versions.
  • This is working on available elements of the HTML file.
  • This is operating more than one event simultaneously.
  • This is disapproved by a developer for the latest version of jQuery.
  • It will not work if the selector condition is removed.
  • This method is lengthy and repetitive to work with every element of the HTML page.
  • The jQuery on() method supports jQuery current and future versions.
  • This is working on current and future elements of the HTML file.
  • This is operating more than one event simultaneously.
  • This is a replacement of the jQuery bind, live, and delegate method.
  • It is used for selected elements and its children element.
  • This method is easy, popular to work with every element of the HTML page.
Uses
  • Handle events of the HTML element.
  • The jQuery functions work on many operations simultaneously.
  • Handle events of the HTML element.
  • The jQuery functions work on many operations simultaneously.

Conclusion

  • The jQuery bind() and jQuery on() method is essential to work advanced operation in web applications.
  • The jQuery bind() and jQuery on() method helps to interact with users and web applications easily.

Recommended Articles

This is a guide to jQuery bind vs on. Here we discuss the jQuery bind vs on key differences with infographics and comparison tables. You may also have a look at the following articles to learn more –

  1. Vue.js vs jQuery
  2. Haskell vs Scala
  3. Angular vs JQuery
  4. Clojure vs Haskell