JQuery - $ is not defined

tl;dr

Step 1 - First, make sure that the jQuery script is being properly loaded into your page. To do this, check that the script tag looks like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>`

Ensure that the script does not have any attributes such as async or defer. To check if the file is loading properly, use the Firebug net panel. If the file is not loading properly, it will be highlighted red and will say “404” beside it.

Step 2 - If the file is loading properly, then the issue is likely due to a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.

Step 3 - To ensure that your code is being loaded after jQuery has been initialized, make sure all jQuery javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});

Step 4 - Finally, make sure that you are not loading any plugins before you load jQuery.