$ not defined when running jQuery

Question

I have the following code and whenever I load it with HTML, the console gives an error right after loading.

Uncaught ReferenceError: $ is not defined

My script is linked to the HTML file like so: <script src="src-animation.js"></script> in the <head>.

Here is my jQuery:

$(document).ready(function(){
    $('.play').click(function() {
        $(this).fadeOut('slow');
        $(this).append("<h1>Now loading...</h1>");
    });
    $('.not-rdy').click(function(){
        alert("This chapter isn't done yet.\nComing soon!");
        $(this).fadeOut('fast');
    });
    $('#updateCHK').click(function() {
        alert("Server is temporarily unavailable.\nTry again later.");
    });
});

What am I doing wrong?

Either you aren't loading jQuery before src-animation.js or it is in noConflict mode. — Alexander O'Mara
– Alexander O'Mara, Commented Feb 13, 2015 at 0:12
@AlexanderO'Mara What do you mean by "loading jQuery before src-animation.js"? — unbindall
– unbindall, Commented Feb 13, 2015 at 0:13

DOK · Accepted Answer · 2015-02-13 00:23:52Z

4

The sequence of loading the external JavaScript files is important. You must include the <script> for jQuery before the <script> for your custom .js file.

So, in the <head>

<script src="jquery.js"></script>
<script src="src-animation.js"></script>

Substitute the proper name of your particular jQuery .js file.

Alternately, you can use a CDN version of the jQuery file. That means that you are causing the client browser to download the jQuery .js file from another web server. In that case, you would do something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="src-animation.js"></script>

edited Feb 13, 2015 at 0:23

answered Feb 13, 2015 at 0:13

DOK

32.8k8 gold badges64 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

unbindall Over a year ago

So from what I'm looking at, you have to download the jQuery library before you can use it?

DOK Over a year ago

No, you do not have to download jQuery. You can reference it from a CDN. But that still has to be in a <script> tag before your other .js file's script tag.

unbindall Over a year ago

I'm guessing that sourcing from a CDN won't work with offline HTML. Am I right?

DOK Over a year ago

You probably can't rely on the CDN offline, but it is possible for the jQuery library to be downloaded and cached before the user goes offline, in which case it might still be present for offline use.

Collectives™ on Stack Overflow

$ not defined when running jQuery

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related