Problemas con el uso $(document).ready(function(){})

Question

Estoy iniciando con js y en la práctica surgió esta duda:

El script que mostraré a continuación funciona correctamente.

<script src="js/jquery-2.0.2.min.js"></script>
<script>
        function accion(num){
            if (num==1) {
                $('#imagen1').hide().fadeIn(3000);
            }
            else if (num==2) {
                $('#imagen2').hide().fadeIn(3000);
            }
            else if (num==3) {
                $('#imagen3').hide().fadeIn(3000);
            }
        }
    </script>

Pero cuando este script lo introduzco dentro de $(document).ready(function(){}) el código ya no funciona:

<script>
    $(document).ready(function(){
        function accion(num){
        if (num==1) {
            $('#imagen1').hide().fadeIn(3000);
        }
        else if (num==2) {
            $('#imagen2').hide().fadeIn(3000);
        }
        else if (num==3) {
            $('#imagen3').hide().fadeIn(3000);
        }
    }
});
</script>

¿Qué hice mal?

¿te arroja algun error o no se ejecuta?, ya que, veo la funcion definida pero la estas llamando — Kevin, Jul 25 '17 at 18:39
las llamo a través de 3 input button haciendo uso de Onclick(1), Onclick(2), Onclick(3). Cada Button hace q la imagen desaparezca y vuelva aparecer. — Rank16, Jul 27 '17 at 17:43

score 4 · Answer 1 · answered Jul 25 '17 at 18:52

La function accion(num) solo es visible dentro de la funcion anonima del .ready(fn).

   $(document).ready(function(){
            function accion(num){
            //...
        }
    });

accion(num); // error, funcion no definida.

Tienes que exponer la funcion al ambito global para que puedas ejecutarla pero aun asi no podras ejecutarla de inmediato porque ready se ejecuta cuando el DOM se ha cargado completamente:

  $(document).ready(function(){
            window.accion = function(num){
           //...
        }
    });

accion(33)// no definida, ready(fn) o se ha ejecutado todavia.

Asi que tienes 2 opciones:

La sacas la definicion del .ready(fn) si la quieres ejecutar inmmediatamente

Por ejemplo:

$(document).ready(function(){

});

 function accion(num){
    alert(num);
  }
action(33)

Nota: el .ready(fn) no seria necesario, solo lo deje como ejemplo.

Ejecutas el metodo dentro del .ready(fn):

$(document).ready(function(){ function accion(num){ alert(num); } action(33) });

Gracias por su respuesta, me ha servido. Un saludo. – Rank16 Jul 27 '17 at 17:50 — Rank16, Jul 27 '17 at 17:50

A. Cedano · Accepted Answer · 2017-07-25T20:01:19.700

Si la función que quieres ejecutar, como supongo, afecta a elementos que se encuentran dentro del DOM, efectivamente, tienes que llamarla cuando el DOM esté listo. Precisamente, esa es la utilidad de $( document ).ready(function() {... que dicho sea de paso está deprecated desde jQuery 3. Se recomienda usar en su lugar: $(function() {. Asegura que no haya código erróneo al intentar usar o modificar elementos del DOM sin estar aún cargados. De modo que en jQuery, todo lo que pertenezca al DOM debe ser llamado dentro del ámbito de $(function() { ...}); Por el contrario, si es un elemento de la ventana (window), debes usar window.onload (el enlace de más abajo explica la diferencia).

Si la acción que quieres ejecutar está ligada a un botón de un formulario por ejemplo, una forma de llamarla sería, una vez el documento listo, escuchar los clicks del botón, mediante su id. Esta es sólo una, entre otras posibilidades de llamar tu función:

// $( document ).ready(function() { (obsoleto,usar function)
$(function() {

  console.log("Ha ocurrido document.ready: documento listo");

  $("#btn").click(function() {
    num=$("#myText").val();
    alert("Botón presionado. Valor es: "+num);
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm" action="">
  Escribe valor:
  <input type="text" id="myText" value="1">
  <input type="button" id="btn" value="Enviar">
</form>

Sobre el funcionamiento de document.ready, puedes consultar: ¿Cuál es la diferencia entre window.onload y $(document).ready()?

Gracias por su respuesta, me ha servido. Un saludo. – Rank16 Jul 27 '17 at 17:50 — Rank16, Jul 27 '17 at 17:50
Me alegro de que te haya servido @Rank16 – A. Cedano Jul 27 '17 at 18:30 — A. Cedano, Jul 27 '17 at 18:30

Problemas con el uso $(document).ready(function(){})

2 Answers2