The “TypeError: $(…).on is not a function” in jQuery is an error common to those new to Jquery. There are many reasons for this error. Let’s take a closer look at it.
Why does the TypeError: $(…).on is not a function in jQuery happen?
There are many reasons to raise the TypeError: $(…).on is not a function in jQuery like:
- Override a library to the value of the $ symbol.
- Your machine’s jQuery version does not support the on() function.
The error message occurs as follows:
Uncaught TypeError: $(…).on is not a function
To ensure this error doesn’t happen, ensure the jQuery version of your machine is at least jQuery 1.7.
How to fix this error?
Case 1: Override a library to the value of the $ symbol
Example:
$(document).ready(function () {
// Use on() function to handle click event of a tag
$('#btn').on('click', function () {
console.log('Button clicked');
});
});
After clicking on a tag with id “btn” the program returns an error:
Uncaught TypeError: $(…).on is not a function
It is possible that your value of the symbol variable ($) is being overwritten by a script that is loading, so I would fix it like this:
jQuery(document).ready(function () {
// Use on() function to handle click event of a tag
jQuery('#btn').on('click', function () {
console.log('Button clicked');
});
});
Here I used jQuery global to replace the ($).
This error is because after you load the jQuery script, you load another script, then the value of ($) will change because the last run script will be saved at ($).
Case 2: Your machine’s jQuery version does not support the on() function
As for the error, I said the on() function only works on version 1.7 or later.
After you have tried to fix the above error by overwriting a script to the value of the $ sign and the error is still thrown, try running this code:
if (typeof jQuery != 'undefined') {
// Check the version jQuery
console.log(jQuery.fn.jquery);
}
Output:
3.6.0
The example shows that the version of jQuery I am using is 3.6.0, so after I did the case correction overriding a library to the value of the $ sign, my program didn’t throw this error again.
After you check that your version is older than 1.7, you should reload a newer version of jQuery, rerun the program and check for errors.
To download the latest version, visit the jQuery homepage to download the link here.
If you don’t want to download it, you can include it from a CDN (Content Delivery Network).
Summary
In this article, I have helped you to fix the TypeError: $(…).on is not a function in jQuery. Try following me. This will help you to remember it longer. Hope this article helps you and your program.
Maybe you are interested:
- TypeError: indexOf is not a function in JavaScript
- TypeError: Cannot read property ‘innerHTML’ of Null in JavaScript
- “TypeError: Cannot read property ‘setAttribute’ of Null” in JavaScript
My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css