jQuery - multiple $(document).ready ...?

Question

Question:

If I link in two JavaScript files, both with $(document).ready functions, what happens? Does one overwrite the other? Or do both $(document).ready get called?

For example,

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

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js :

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});

I'm sure it is best practice to simply combine both calls into a single $(document).ready but it's not quite possible in my situation.

Possible duplicate of [Can you have multiple $(document).ready(function(){ ... }); sections?](https://stackoverflow.com/questions/1327756/can-you-have-multiple-document-readyfunction-sections) — IEnjoyEatingVegetables, Jun 27 '18 at 20:38

score 386 · Accepted Answer · edited Oct 27 '18 at 09:19

386

All will get executed and On first Called first run basis!!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Demo As you can see they do not replace each other

Also one thing i would like to mention

in place of this

$(document).ready(function(){});

you can use this shortcut

jQuery(function(){
   //dom ready codes
});

edited Oct 27 '18 at 09:19

Eugen Konkov

22,193
17
108
158

answered Mar 10 '11 at 17:29

Praveen Prasad

31,561
18
73
106

67

or even shorter $(function() { // dom ready codes }); http://api.jquery.com/ready/ – davehale23 May 03 '12 at 15:21
228

Remember seeing $(function() { // do stuff }); for the first time, and how difficult it was to Google the explanation? $(document).ready communicates so much more for so little... – Matt Montag Oct 15 '13 at 20:19
63

A vote for terse, less readable code is a vote for terrorism. – FreeAsInBeer Jan 21 '15 at 16:42
11

The shortcuts provide no benefit, but do cause obfuscation. If your goal is to make your code "shorter" in terms of time it takes to read, understand, and maintain, then these shortcuts will lead you the long way around. – tadasajon Feb 26 '15 at 16:12
4

if using shortcuts is evil, one should use `jQuery(document).ready(function(){ });` – Memet Olsen Feb 29 '16 at 14:21
2

I agree that terse instead of readable is usually bad in compiled languages. I am not sure for interpreted languages. If the size of the message on port 80 is a concern, shortcuts start seeming more reasonable. – Skip Saillors May 26 '16 at 16:22
@MattMontag absolutely - explicit is often so much better than magic – Toni Leigh Jun 21 '16 at 08:14

score 83 · Answer 2 · edited Aug 12 '16 at 05:21

83

It is important to note that each jQuery() call must actually return. If an exception is thrown in one, subsequent (unrelated) calls will never be executed.

This applies regardless of syntax. You can use jQuery(), jQuery(function() {}), $(document).ready(), whatever you like, the behavior is the same. If an early one fails, subsequent blocks will never be run.

This was a problem for me when using 3rd-party libraries. One library was throwing an exception, and subsequent libraries never initialized anything.

edited Aug 12 '16 at 05:21

SMR

6,628
2
35
56

answered Oct 16 '12 at 04:10

cjastram

946
6
3

4

This. I've just spent a good hour narrowing down an issue down to this point. One of my `$(document).ready` calls threw an error and therefore a different `$(document).ready` function never got called. It was driving me nuts. – scrollup Jun 09 '15 at 15:34
14

This is no longer the case. As of jQuery 3.0, jQuery ensures that an exception occuring in one handler does not prevent subsequently added handlers from executing. http://api.jquery.com/ready/ – Ravi Teja Apr 18 '17 at 05:42

Ed Fryed · Answer 3 · 2011-03-12T01:09:45.373

$(document).ready(); is the same as any other function. it fires once the document is ready - ie loaded. the question is about what happens when multiple $(document).ready()'s are fired not when you fire the same function within multiple $(document).ready()'s

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

both will behave exactly the same. the only difference is that although the former will achieve the same results. the latter will run a fraction of a second faster and requires less typing. :)

in conclusion where ever possible only use 1 $(document).ready();

//old answer

They will both get called in order. Best practice would be to combine them. but dont worry if its not possible. the page will not explode.

^^edited mine as i thought people might get confused between running the same function multiple times and running different functions in multiple $(document).ready's.^^ hope it helps. — Ed Fryed, Mar 12 '11 at 01:13

score 22 · Answer 4 · answered Mar 10 '11 at 17:27

22

Execution is top-down. First come, first served.

If execution sequence is important, combine them.

answered Mar 10 '11 at 17:27

Diodeus - James MacFarlane

112,730
33
157
176

score 10 · Answer 5 · answered Mar 10 '11 at 17:35

Both will get called, first come first served. Take a look here.

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Output:

Document-ready 2 was called!

score 4 · Answer 6 · edited Jun 26 '18 at 20:17

4

Not to necro a thread, but under the latest version of jQuery the suggested syntax is:

$( handler )

Using an anonymous function, this would look like

$(function() { ... insert code here ... });

See this link:

https://api.jquery.com/ready/

edited Jun 26 '18 at 20:17

Mohammad Kanan

4,452
10
23
47

answered Jun 26 '18 at 15:59

Arlo Guthrie

1,152
3
12
28

jQuery - multiple $(document).ready ...?

6 Answers6

Linked

Related