1

He intentado llamar a una función desde HTML a JQuery con onclick, pero no ejecuta. ¿Cuál es la razón?

$(document).ready(function () {
function hola(){
alert("hola")
}
})
5

3 respuestas 3

0

Puedes probar a utilizar el listener .on("click", function()) de jQuery.

Para hacerlo funcionar solo tienes que agregar la clase btn-hola a un botón que tengas en el HTML.

$(".btn-hola").on("click", function() {
  alert("hola");
});

Espero que te haya sido de utilidad.

1
  • Sí, eso es lo que está pre-definido, quería saber por qué no funcionaba con el onclick del HTML
    – Javier IS
    Commented el 25 jul. 2023 a las 21:04
0

El código que tengas dentro de $(document).ready() se dispara una vez carguen todos los elementos del DOM de tu HTML.

Entonces, en tu código:

$(document).ready(function () {
  function hola() {
    alert("hola");
  }
});

Tu función hola() solo está definida dentro del ámbito de la función $(document).ready(), por lo que quiere decir que la función hola() solo es accesible dentro de esa función y no puede ser llamada desde otros lugares fuera de ella, incluyendo desde el atributo onclick en el HTML.

$(document).ready(function () {
  function hola() {
    alert("hola");
  }
});
<button onclick="hola()">Saludo</button>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

Ni tampoco invocando la función fuera del todo:

$(document).ready(function () {
  function hola() {
    alert("hola");
  }
});

hola();
<button onclick="hola()">Saludo</button>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>


Una solución sería que una vez cargue toda la página, se defina la función hola() y luego asigne un listener con el evento clic al botón, indicando que al ser escuchado el evento en tu botón (es decir, cuando se haga clic en el botón), invoque la función hola() dentro del mismo bloque, ya que en ese bloque la función fue definida y puede ser accesible desde ese mismo bloque:

$(document).ready(function () {
  // Defino
  function hola() {
    alert("hola");
  }

  // Asigno evento clic al botón
  $("#btn").click(function () {
    hola(); // Invoco la función que está dentro de este bloque
  });
});
<button id="btn">Saludo</button>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

Y con el atributo onclick en tu HTML, el problema sería que estás creando ya el elemento button con el evento click para que al ser clickeado llame a la función hola(), por lo que no tendría acceso al $(document).ready(function () y no encontraría dicha función (como el ejemplo que te adjunté arriba). Lo único que se me ocurre es definir la función hola() en el ámbito global para que desde el propio evento click invoques la función ya definida, y aquí ya sería inutilizable el código jQuery:

// Defino la función, lista para ser llamada
function hola() {
  alert("¡Hola!");
}
<!-- al hacer click, invoco la función "hola()", que ya está definida previamente -->
<button onclick="hola()">Saludo</button>

0

Tu problema no es particular de Jquery es de javascript, en este lenguaje es posible que las funciones reciban como argumento otra función

$(document).ready(
  function () {        //  |-
      function hola(){ //  |
         alert("hola") // <   Esto es el argumento que se pasa a la función ready
      }                //  |
  }                    //  |-
)

Y un argumento "fijo" solo vive dentro de la función

Reduzcamos el problema para entenderlo mejor, digamos que tenemos este código

function suma10(num) { return num + 10}

suma10(32)

Como podrías acceder a ese 32? pues solo puedes dentro de la función suma10, nunca desde fuera. Una manera de poder tener control sobre los argumentos es declararlos antes y no colocarlos fijos

function suma10(num) { return num + 10}

const unnumero=32;
suma10(unnumero);

Esta misma lógica aplica a tu caso:

function hola(){
   alert("hola")
}

$(document).ready(hola); // es hola sin "()", porque NO estamos invocándola, solo estamos pasándola como argumento por su nombre

//y luego en js
botonid.addEventListener("click", hola);

//o en jquery
// $("#idboton").click(hola)

//o en html
//<button onclick="hola()">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.