Solve - $(document).ready is not a function Error in jQuery

avatar

Borislav Hadzhiev

Wed Oct 20 20212 min read

Solve - $(document).ready is not a function Error #

The "$(document).ready is not a function" error occurs for multiple reasons:

  • Placing second set of parenthesis after the call to the ready() method.
  • Loading the jQuery library after running your JavaScript code.
  • Forgetting to load the jQuery library.
  • Loading the jQuery library more than once on the same page.
  • Overriding the $ or jQuery variables in your code.

typeerror document ready is not a function

Here is an example of how the error occurs.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div>Hi There</div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ Your JS script here ✅ --> <script src="index.js"></script> </body> </html>

Here is the related JavaScript code.

index.js
$(document).ready(function () { console.log('hello world'); })(); // 👈️ has extra set of () // ⛔️ TypeError: $(...).ready(...) is not a function

The error occurred because we placed a second set of parenthesis after the $(document).ready() method, so we effectively invoked the return value of the ready() method.

To solve this, remove the second set of parenthesis:

index.js
$(document).ready(function () { console.log('hello world'); }); // ✅ Works

To solve the "$(document).ready is not a function" error, make sure to load the jQuery library before running your JavaScript code, load jQuery only once on the page.

The order we load the scripts in is very important. The scripts in your index.html file should be loaded in the following order:

  1. Load the jQuery library
  2. Load your JavaScript code

If you try to load the jQuery library after running your index.js file, the jQuery global will not be accessible in your JS file and you will get the error back.

The same would happen if you load the jQuery library twice on the same page. Loading the library twice re-runs the initialization process and often glitches the global jQuery variable causing the error.

Another cause for the error is - forgetting to load the jQuery library on the page. If you don't load the library, obviously you can't access the jQuery global variable in your code.

Lastly, the error also occurs if you declare the $ or jQuery variables in your code and shadow the values from the library.

This could also happen if you're bringing in another 3rd party package that defines the $ or jQuery variable and clashes with the original jQuery library.
Use the search field on my Home Page to filter through my more than 1,000 articles.