rlb.usa rlb.usa - 3 months ago 17
Javascript Question

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

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.

Answer

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

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

Demo

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