A visual summary explaining the main topic of this post: How to Fix "jQuery is not defined" Error in JavaScript

Introduction

The “Uncaught ReferenceError: jQuery is not defined” or “$ is not defined” is a classic error that nearly every web developer encounters when using jQuery. It means that your code is trying to use the jQuery library before it has been loaded and initialized in the browser.

This guide will walk you through the common reasons for this error and provide simple, effective solutions to ensure your jQuery-dependent scripts run smoothly.

What Causes “jQuery is not defined”?

This error occurs for a few primary reasons, all related to the loading order of scripts in your HTML document.

  1. Incorrect Script Order: Your custom script that uses jQuery (<script src="my_script.js"></script>) is placed before the script that loads the jQuery library (<script src=".../jquery.min.js"></script>). The browser executes scripts in the order they appear in the HTML, so your code tries to use jQuery before it exists.
  2. Failed jQuery Load: The link to the jQuery library is broken, pointing to the wrong location, or the CDN (Content Delivery Network) is temporarily down. The browser fails to download the library, so it’s never defined.
  3. Asynchronous Loading Issues: Using async or defer attributes on your script tags can alter the execution order, potentially causing your code to run before jQuery is ready.
  4. jQuery Slim Build: You might be using a “slim” version of jQuery, which excludes the ajax and effects modules. If your code tries to use functions from these modules (like $.ajax()), it can sometimes lead to related errors, though the primary “not defined” error is about the core library itself.

How to Fix the Error

Let’s go through the solutions, starting with the most common fix.

1. Check Your Script Loading Order

This is the most frequent cause. Ensure that you include the jQuery library before any other scripts that depend on it. The correct order in your HTML file should be:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <!-- Your HTML content -->

    <!-- 1. Load jQuery first -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- 2. Then load your custom script that uses jQuery -->
    <script src="js/my_script.js"></script>
</body>
</html>

Placing scripts at the end of the <body> tag is a common best practice, as it allows the browser to render the page content before pausing to parse and execute JavaScript.

2. Verify the jQuery Source Path

Double-check the src attribute of your jQuery <script> tag.

  • Is the URL correct? Check for typos in the path to your local file or the CDN link.
  • Does the file exist? Open the URL directly in your browser. You should see the jQuery source code. If you get a 404 Not Found error, the path is wrong.

Example using a local file:

<!-- Make sure this path is correct relative to your HTML file -->
<script src="libs/jquery/jquery-3.6.0.min.js"></script>

Example using a CDN:

<!-- A reliable CDN is often the best choice -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

3. Wrap Your Code in a Document Ready Block

Even if the script tags are in the right order, it’s best practice to wait until the DOM (Document Object Model) is fully loaded before running your jQuery code. This prevents issues where your script tries to manipulate HTML elements that don’t exist yet.

jQuery provides the $(document).ready() function for this purpose.

// In your my_script.js file

$(document).ready(function() {
    // All your jQuery code goes here
    $('#my-button').click(function() {
        alert('Button clicked!');
    });
});

// A shorter, equivalent syntax is also common:
$(function() {
    // All your jQuery code goes here
    $('h1').css('color', 'blue');
});

This ensures that the code inside the function only runs after jQuery is loaded and the page structure is ready.

4. Check for Network Issues or Ad Blockers

  • Network Connectivity: Make sure you are connected to the internet, especially if you are using a CDN.
  • Ad Blockers: Some aggressive ad blockers or browser extensions might block requests to certain CDNs. Try disabling them to see if it resolves the issue.

Conclusion

The “jQuery is not defined” error is almost always a loading issue. By ensuring your <script> tags are in the correct order, verifying the path to the jQuery file, and wrapping your code in a $(document).ready() block, you can eliminate this error and build reliable, jQuery-powered applications. Always load your dependencies first—it’s a fundamental rule of web development.

Professional Depth Check

For How to Fix “jQuery is not defined” Error in JavaScript, the practical standard is not whether the reader can repeat one instruction once. Treat the topic as a reproducible debugging procedure: verify runtime environment, exact error boundary, minimal reproduction, and rollback path before drawing a conclusion. The result should be written as a small decision record, because future readers need to know which fact was observed, which assumption was used, and which condition would change the answer.

Evidence That Makes the Guidance Reliable

Use objective evidence before changing a workflow. Good evidence includes full command output, version numbers, changed files, and expected versus actual behavior. If two pieces of evidence conflict, keep the conflict visible instead of smoothing it over. For example, a successful quick fix is still weak evidence if the same input, account, dependency, or device state has not been tested again. A durable article should help the reader distinguish a confirmed fix from a plausible fix.

Review Table

Review Item What To Confirm Why It Matters
Scope The exact case covered by this article Prevents over-applying the advice
Baseline The state before any change Makes rollback and comparison possible
Change The smallest action taken Reduces hidden side effects
Result The observed output after the change Separates evidence from expectation
Recheck When to revisit the conclusion Keeps the post accurate over time

Continue with these related posts from the same topic area.

Leave a comment

You may also enjoy