If you are using jQuery in your web development project, you might encounter a common error that says “$ is not defined”. This error means that the jQuery library is not loaded properly or that there is a conflict with another library that uses the same symbol.
In this article, we will show you how to fix this issue in different scenarios and explain the causes behind it.
Scenario 1: jQuery is not loaded
The most obvious reason for this error is that the jQuery library is not loaded at all or that it is loaded after the code that uses it. To check if this is the case, you can open the developer tools of your browser and look for any errors or warnings related to jQuery in the console or the network tab.
If you don’t see any jQuery file in the network tab, it means that you forgot to include it in your HTML code. To fix this, you need to add a script tag that links to the jQuery source file before any other script that uses it. For example:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// My awesome code that uses jQuery
</script>
If you see a jQuery file in the network tab but it has a status of 404 (not found) or 403 (forbidden), it means that the URL of the jQuery source file is incorrect or inaccessible. To fix this, you need to change the URL to a valid one or download the jQuery file and host it on your own server.
Scenario 2: jQuery is loaded but $ is overwritten
Another possible reason for this error is that the $ symbol, which is a shorthand for the jQuery function, is overwritten by another library or variable. This can happen if you are using another library that also uses the $ symbol, such as Prototype or MooTools, or if you have declared a global variable with the same name.
To check if this is the case, you can type $ in the console of your browser and see what it returns. If it returns something other than the jQuery function, it means that $ is overwritten by something else.
To fix this, you have two options:
-
- Use jQuery.noConflict() method to release the $ symbol and assign it to another variable. For example:
var jq = jQuery.noConflict();
// Use jq instead of $ to access jQuery
jq(document).ready(function(){
// My awesome code that uses jQuery
});
-
- Use jQuery instead of $ to access jQuery. For example:
jQuery(document).ready(function(){
// My awesome code that uses jQuery
});
Scenario 3: jQuery is loaded but the code is executed before the document is ready
Another possible reason for the `$ is not defined` error is that the jQuery code is executed before the document is fully loaded. This can happen if you put your script tag in the head of your HTML document or if you use an async or defer attribute on it. To fix this, you need to wrap your jQuery code inside a `$(document).ready()` function, which ensures that it runs only after the document is ready.
Alternatively, you can move your script tag to the end of the body of your HTML document, which also ensures that it runs after the document is loaded.