$ is not defined before DOMContentLoaded - JQuery

Question

the first statement in a js file I have is

$(document).on("DOMContentLoaded", function (event) {
   $(document.body).on('beforeinsert', onBeforeInsert);
   $(document.body).on('afterinsert', onAfterInsert);
   $(document.body).on('wait', onWait);
   $(window).on('load', onLoad);
});

but when I use firebug it tells me that "$ is not defined". Elsewhere in the file everything works as expected. In fact if I change the first line to

document.addEventListener("DOMContentLoaded", function (event) {

everything also works fine. I don't want to do this because I want to be able to get cross browser compatibility.

Answer 1

You're getting that error message because your script runs before $ is defined.

To fix it, make sure jQuery is loaded before running that script.

Answer 2

It sounds like you haven't included the JQuery JS file before attempting to use JQuery. Remember that browsers render the page top to bottom so add the reference to the Jquery JS file to the top of the page.

Answer 3

Your js is running before jquery loads. Try:

1 - Reference jquery at page header, before defining this script

2 - use $( [...] ):

$(function() {
    $(document).on("DOMContentLoaded", function (event) {
       $(document.body).on('beforeinsert', onBeforeInsert);
       $(document.body).on('afterinsert', onAfterInsert);
       $(document.body).on('wait', onWait);
       $(window).on('load', onLoad);
    });
});