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

publicado por: Anonymous

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?

solución

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:

_x000D_

_x000D_

// $( document ).ready(function() { (obsoleto,usar function)_x000D_
$(function() {_x000D_
_x000D_
  console.log("Ha ocurrido document.ready: documento listo");_x000D_
_x000D_
  $("#btn").click(function() {_x000D_
    num=$("#myText").val();_x000D_
    alert("Botón presionado. Valor es: "+num);_x000D_
  });_x000D_
_x000D_
_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<form id="myForm" action="">_x000D_
  Escribe valor:_x000D_
  <input type="text" id="myText" value="1">_x000D_
  <input type="button" id="btn" value="Enviar">_x000D_
</form>

_x000D_

_x000D_

_x000D_

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

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *