Estoy aprendiendo jquery y tengo dificultades para ejecutar el siguiente código extremadamente simple.
Mi HTML se ve como:
<html>
<head>
<title>JQUERY</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<input type="button" id="testbutton" value="test" />
</body>
Mi script.js se ve así:
$(document).ready(function(){
alert("document is ready");
});
$("#testbutton").click(function(){
alert("button clicked");
});
Cuando cargo la página en el navegador ... Recibo la primera alerta cuando se carga el documento (por lo que estoy seguro de que al menos estoy usando la biblioteca correcta y se está descargando, etc.).
Sin embargo, cuando hago clic en mi botón no veo la segunda alerta que dice "se ha hecho clic en el botón"
¿Qué me estoy perdiendo?
Respuestas
3 para la respuesta № 1los click manejador tiene que ir dentro de su $(document).ready, para asegurarse de que esté enlazado cuando el DOM esté listo, y se garantice que el elemento estará disponible para el procesamiento de Javascript:
$(document).ready(function(){
alert("document is ready");
// bind a click handler to #testbutton when the DOM has loaded
$("#testbutton").click(function(){
alert("button clicked");
});
});
Desde el documentación:
Esto es lo primero que hay que aprender jQuery: Si quieres que un evento funcione. en tu pagina deberias llamarlo dentro de $ (document) .ready () función. Todo en su interior lo hará cargar tan pronto como el DOM se carga y antes de que se carguen los contenidos de la página.
1 para la respuesta № 2
Probablemente desee vincular su controlador de eventos dentro del evento $ (document) .ready ():
$(document).ready(function(){
alert("document is ready");
$("#testbutton").click(function(){
alert("button clicked");
});
});
Esto asegura que el DOM esté cargado antes de que se ejecute su otro script. Vea si esto resuelve su problema.
1 para la respuesta № 3
También necesita que haga clic en enlace dentro de un document.ready, Me gusta esto:
$(function(){ //short for $(document).ready(function(){
alert("document is ready");
$("#testbutton").click(function(){
alert("button clicked");
});
});
los ¿por qué? es que el selector $("#testbutton") no encontré el elemento id="testbutton" si no está listo cuando se ejecuta el selector, debe ejecutarse después del elemento en la página, o en una document.ready manejador como el de arriba.