Uncaught ReferenceError: $ is not defined when using $(document).ready

Question

I'm using the Foundation CSS framework, which loads jQuery in the footer. This is not atypical and recommended practice by many. However, I need to write scripts in the page. Using document ready should do the trick, but I'm still getting an error. Why?

$(document).ready(function(){
    // My Code
    var a;
    $(#id).dosomething({
    // Doing Something
    });
});

Just before body close tag:

<script src="scripts/jquery-1.8.0.min.js"></script>
// More Scripts
</body>

But I get the standard error "Uncaught ReferenceError: $ is not defined" (4x because I have 4 scripts in the body). Also, I cannot move the jQuery reference above the script call as it conflicts with other scripts. I cannot move the script call below jQuery reference either.

Answer 1

Using document ready should do the trick, but I'm still getting an error. Why?

I think you misunderstood. You use $(document).ready to register code that should be executed once the DOM is read, which is typically when you want to manipulate the DOM. $ is jQuery here, so obviously it has to be loaded before you call $(document)....

I cannot move the jQuery reference above the script call as it conflicts with other scripts

Maybe you should use jQuery.noConflict() ^[docs] then.

Answer 2

It's a bit old, but maybe it will help other people. I got the same error and it was because I loaded my own JS script before the Jquery CDN in the html page. You must call the JQuery CDN before calling your own script. <script src = "https: // jquery-link / .../jquery.js" /> and after <script src = "/ myfoder / myscript.js />