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")
}
})
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.
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>
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()">
hola()
está definida dentro del bloque$(document).ready()
... debes definirla fuera del bloque para que sea accesible desde cualquier parte del código...