Skip to main content

How to Resolve the jQuery Error: "$(...).methodname is not a function" in JavaScript

Errors like TypeError: $(...).methodName is not a function (e.g., .ready(), .validate(), .autocomplete()) are some of the most common issues when working with jQuery and its ecosystem of plugins. This error message is a clear signal that the jQuery object ($) does not have the method you are trying to call.

This guide will explain the fundamental reasons why this error occurs and provide a universal, step-by-step process to diagnose and fix it, covering everything from incorrect script loading order to version conflicts.

The Core Problem: The Method Doesn't Exist on the $ Object​

When you see $(...).methodName is not a function, it means that at the moment your code is running, the jQuery object ($) that you're using does not have a function called methodName attached to it.

This happens for a few predictable reasons:

  • The core jQuery library hasn't loaded yet, so the $ variable itself is undefined.
  • A jQuery plugin (like jQuery UI or jQuery Validate) that is supposed to add the method to $ has not been loaded correctly.
  • The $ variable has been overwritten by another library.

Cause 1 (Most Common): Incorrect Script Loading Order​

JavaScript files in an HTML document are loaded and executed in the order they appear. If you try to use jQuery or a jQuery plugin in your script before the library file has been loaded, the browser won't know what $ or .methodName is.

Problem: your custom script runs before the jQuery library is loaded.

<!-- PROBLEM: Your script runs first, so `$` is not defined yet. -->
<script src="my-script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Solution: Always load the core jQuery library first, followed by any jQuery plugins, and finally, your own custom script.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Example</title>
</head>
<body>
  <!-- Your HTML content -->

  <!-- 1. Load the core jQuery library FIRST -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <!-- 2. (Optional) Load any jQuery plugins SECOND -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

  <!-- 3. Load YOUR script LAST -->
  <script src="my-script.js"></script>
</body>
</html>

Cause 2: Forgetting to Include a jQuery Plugin​

Methods like .validate() or .autocomplete() are not part of the core jQuery library. They are added by plugins that must be loaded separately.

Problem: you are trying to use the jQuery Validate plugin, but you have only included the core jQuery library.

// This will cause "TypeError: $(...).validate is not a function"
// if the validation plugin is not loaded.
$('#my-form').validate();

Solution: ensure you include the <script> tag for the required plugin in your HTML file, after the core jQuery script.

<!-- Correct order -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

Cause 3: Loading jQuery More Than Once​

Loading the jQuery library multiple times can cause strange issues. If you load it a second time, it will overwrite the first instance. If a plugin was attached to the first instance, it will be lost, leading to the "...is not a function" error.

Example of problem:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- PROBLEM: Loading jQuery again erases the jQuery UI plugins. -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="my-script.js"></script>

In my-script.js, a call to $('#el').autocomplete() would now fail.

Problem: scan your HTML file and your project's components to ensure that jQuery is included only once.

How to Debug the Error​

  • Check the Browser Console: The primary error message ... is not a function is your first clue.
  • Check the Network Tab: Open your browser's Developer Tools (F12) and go to the Network tab.
    • Verify that all your jQuery-related script files are loading with a status of 200 OK. If you see a 404 Not Found error, it means your src path is incorrect.
    • Check the order in which the files are listed. Make sure jquery.min.js appears before any plugins and before your custom script.
  • Check for Multiple jQuery Loads: Use the search function in the Network tab to search for "jquery". If you see more than one jquery.min.js (or similar) file, you have found a likely cause.

Conclusion​

The TypeError: $(...).methodName is not a function error in jQuery is almost always a loading issue.

To solve it, follow this checklist:

  1. Is the core jQuery library being loaded before all other scripts that depend on it?
  2. If the method comes from a plugin (like jQuery UI or Validate), is the plugin's script file being included?
  3. Is the plugin script being loaded after the core jQuery library?
  4. Is the jQuery library being loaded only once on the page?
  5. Are all script paths correct (i.e., no 404 errors in the Network tab)?

By systematically checking your script loading order and dependencies, you can quickly resolve this common jQuery error.

Table of Contents