Multiple DOM Ready?

Question

Possible Duplicate:
JQuery - multiple $(document).ready …?

I have my JS code that is using jQuery within the jQuery Document Ready IE:

$(function() {

});

I am running multiple jQuery scripts on the page and all are contained within one $(function() { }); is there any reason I should break the scripts into multiple ready handlers? IE:

$(function() {
      // First Script
});

$(function() {
      // Second Script
});

//etc.

or is it okay to have multplie scripts within one? IE:

$(function() {
      // First Script
      //Second Script
      //etc. 
});

I assume one is just fine but I want to ensure there are no reasons I should use multiple ones.

1 Ready handler. No reason for multiple unless they're in different files. — Ohgodwhy, Jan 06 '13 at 21:30
you can do it but technically speaking you would only need one — JFK, Jan 06 '13 at 21:31
See [JQuery - multiple $(document).ready …?](http://stackoverflow.com/a/5263440/1889273) — Boaz, Jan 06 '13 at 21:33

score 7 · Accepted Answer · answered Jan 06 '13 at 21:31

You could have multiple document.ready handlers in your script(s), jQuery will merge them into a single one before executing anyway. But it's really not necessary to have many document.ready handlers. One is enough. And if you put your scripts always at the end of your DOM, just before the closing </body> tag you don't need to use any document.ready handlers.

For example:

<html>
<head>
    <title></title>
    ... your CSS references come here
</head>
<body>
    ... the markup of the body comes here ...

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        // you don't need to use any document.ready handlers here =>
        // you could directly write your scripts inline or reference them
        // as external resources. At this stage the DOM will be ready
    </script>
</body>
</html>

The question is `should` not `could` and you definitely `should not`. — Ohgodwhy, Jan 06 '13 at 21:32
@Ohgodwhy: How is it a "definitely"? Maybe someone likes separation. — Ry-, Jan 06 '13 at 21:37
He might use some Java-Webframework where this could happen (e.g. Wicket - when more than one Component wants to add some stuff in domready) — Manuel Manhart, Jun 12 '14 at 16:03

score 4 · Answer 2 · answered Jan 06 '13 at 21:31

4

It makes absolutely no difference with regards to how it works.

However, it can be useful for organision.

On the other hand, it means more jQuery has to run.

answered Jan 06 '13 at 21:31

Niet the Dark Absol

320,036
81
464
592

2

Why would it have *more* to run? – Dhaivat Pandya Jan 06 '13 at 21:31
@Dhaviat Pandya Because everytime you call `$(function(){` you build a jQuery wrapper for the DOM ready event, which causes overhead. – Ohgodwhy Jan 06 '13 at 21:33
1

@Ohgodwhy, that's not true. jQuery merges all `$(function() { });` handlers you have written into a single document ready subscription before executing. There is no overhead. – Darin Dimitrov Jan 06 '13 at 21:36
1

It's still having to call `$()`, which works out what you give it (in this case a function) and what to do with it. That's the overhead. – Niet the Dark Absol Jan 06 '13 at 21:37
1

@Ohgodwhy: That's a little misleading. The amount of time it takes to "build" a wrapper is negligible, and I don't think jQuery even builds one for that particular case. – Ry- Jan 06 '13 at 21:38
@Ohgodwhy: [No wrapper-building involved for multiple calls.](https://github.com/jquery/jquery/blob/master/src/core.js#L165) – Ry- Jan 06 '13 at 21:44

score 0 · Answer 3 · answered Jan 06 '13 at 21:44

You can wrap all of your scripts/functions inside of a single ready event or you can simply place all of your scripts after your html and then avoid having to wait for a ready event because the DOM is already loaded by this point.

<html>
<head>
    <!-- Style sheets Go Here -->
</head>
<body>
    <!--HTML Goes Here -->
    <!-- Scripts Go Here -->
</body>
</html>

Multiple DOM Ready?

3 Answers3