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.
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
});
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.
$(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.