Pregunta:
Si vinculo dos archivos JavaScript, ambos con funciones $(document).ready , ¿qué sucede? ¿Uno sobrescribe al otro? ¿O se llama a ambos $(document).ready ?
Por ejemplo,
<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!"); });
Estoy seguro de que es una buena práctica simplemente combinar ambas llamadas en un solo $(document).ready , pero no es del todo posible en mi situación.
¡ Todo se ejecutará y se llamará por primera vez!
<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 Como puedes ver no se reemplazan entre si
También una cosa que me gustaría mencionar
en lugar de esto
$(document).ready(function(){});puedes usar este atajo
jQuery(function(){ //dom ready codes });Es importante tener en cuenta que cada llamada jQuery() debe regresar. Si se lanza una excepción en uno, las llamadas posteriores (no relacionadas) nunca se ejecutarán.
Esto se aplica independientemente de la sintaxis. Puede usar jQuery() , jQuery(function() {}) , $(document).ready() , lo que quiera, el comportamiento es el mismo. Si uno de los primeros falla, los bloques subsiguientes nunca se ejecutarán.
Esto fue un problema para mí al usar bibliotecas de terceros. Una biblioteca lanzaba una excepción y las bibliotecas posteriores nunca inicializaron nada.
$(documento).listo(); es lo mismo que cualquier otra función. se activa una vez que el documento está listo, es decir, cargado. la pregunta es sobre qué sucede cuando se activan múltiples $(document).ready(), no cuando activa la misma función dentro de múltiples $(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>'); });ambos se comportarán exactamente igual. la única diferencia es que aunque el primero logrará los mismos resultados. este último se ejecutará una fracción de segundo más rápido y requiere menos tipeo. :)
en conclusión, siempre que sea posible, solo use 1 $(document).ready();
//respuesta antigua
Ambos serán llamados en orden. La mejor práctica sería combinarlos. pero no te preocupes si no es posible. la página no explotará.