$ 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.

This wouldn't fix your problem, but just use `$(document).ready(function () {});` instead of looking for the `DOMContentLoaded` event - it will be more compatible across browsers — Ian, May 15 '13 at 15:19
@karthikr I think he means using `$(document).ready` INSTEAD of listening on `$(document)` for a `DOMContentLoaded` event, which is correct. — Kevin B, May 15 '13 at 15:20
@karthikr I don't know what you mean. If this code is in the ``, `document.body` won't be found, and it should wait for the DOM to be ready, using `.ready()`. Nonetheless - listening for the `DOMContentLoaded` event is silly to do when you have jQuery to do it for you in a more reliable way. And if the code is in the ``, then waiting for the DOM to be ready is unnecessary anyways, unless the OP **needs** to make sure the DOM is ready before any of the new bound events should be able to be called — Ian, May 15 '13 at 15:20

score 1 · Accepted Answer · answered May 15 '13 at 15:18

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.

answered May 15 '13 at 15:18

Derek Henderson

9,388
4
42
71

score 1 · Answer 2 · answered May 15 '13 at 15:20

1

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.

answered May 15 '13 at 15:20

Compy

1,157
1
12
24

1

The reference to the jQuery library doesn't need to be (and should not be) at the top of the page, just before any script that requires jQuery. – Derek Henderson May 15 '13 at 15:21
or, add it to the bottom, but make sure anything that needs it comes after it. If it's at the bottom, you don't even need a DOMContentLoaded event listener. – Kevin B May 15 '13 at 15:21

score 0 · Answer 3 · answered May 15 '13 at 15:25

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);
    });
});

$ is not defined before DOMContentLoaded - JQuery

3 Answers3