jQuery document.ready() doesn't work with Require.js

Question

I am calling Require.js from right before the closing body tag:

    <script data-main="assets/scripts/src/main.js" src="assets/scripts/lib/requirejs/require.js"></script>
</body>

Here is what my main.js contains:

requirejs.config({
    urlArgs: "bust=" + (new Date()).getTime(), // override browser cache
});

require(['views/appView'], function (App) {
    App.initialize(); // this is just to test the module is actually loading
});

And appView.js contains:

define([
    'modernizr',
    'jquery',
    'underscore',
    'backbone',
    'common', // this module has about 4 other dependencies too
    'dust',
    'routers/main',
    'views/main'
], function (Modernizr, $, _, Backbone, Common, dust, router, mainView) {
    // This is supposed to load, even if jQuery loads after the DOM ready event
    $(document).on('ready', function () {
        console.log("I don't want to play nice");
    });

    return {
        initialize: function () {
            console.log("Init");
        }
    }
});

Unfortunately, this: console.log("I don't want to play nice"); does not happen at all.

This is how my network timeline looks in Chrome Dev Tools. As you can see, the DOM ready event fires way before jQuery loads - but AFAIK, jQuery knows how to handle this! So I am lost.

Answer 1

It should be,

$(document).ready(function () {
    console.log("I don't want to play nice");
});

$(document).on("ready", handler), deprecated as of jQuery 1.8 http://api.jquery.com/ready/

Answer 2

Given that RequireJS is used to load only the modules needed for a specific page, developers may not want to load the entire jQuery library on some pages just for its $(document).ready(function(){}) callback. Alternatively, use RequireJS' domReady in appView.js:

define([
    'domReady',
    'modernizr',
    'etc'
], function (domReady, Modernizr, etc) {
    domReady(function () {
        console.log("I'll play nice");
    });
});

or add an ! on the domReady define to avoid nested callbacks:

define([
    'domReady!',
    'modernizr',
    'etc'
], function (domReady, Modernizr, etc) {
    console.log("I'll also play nice");
});