[SOLUCIONADO] Duda con código javascript

sirdaiz · #1 (**permalink**) 03/10/2013, 04:38

Si tengo esto no sale el alert:

Código:

<body>
<script type="text/javascript">
$("#filter").click(function(){
    alert('clicked!');
});

</script>	
	
<div id="borradivf">hergregre</div>
<input type="button" id="filter" name="filter" value="Filter" />

</body>
</html>

pero si tengo esto:

Código:

<body>

	
<div id="borradivf">hergregre</div>
<input type="button" id="filter" name="filter" value="Filter" />


<script type="text/javascript">
$("#filter").click(function(){
    alert('clicked!');
});

</script>	

</body>
</html>

Por que?

Gracias

javioreto · #2 (**permalink**) 03/10/2013, 05:51

En la propia documentación de jquery te indican que la segunda opción es la correcta:

http://api.jquery.com/click/

Supongo que hasta que el documento no ha sido procesado por el DOM del navegador el script no puede cargar el evento .click()

Se me ocurre que que al ejecutar $("#").click(function() la jquery podría crear internamente un array con todas las etiquetas que concuerden con "filter" pero si lo haces antes del documento el array estaría vacío.

neglivv · #3 (**permalink**) 03/10/2013, 11:25

javioreto Tiene razón, el evento "click" no se aplica al input porque aun no ha sido cargado en el DOM. Por esto de la segunda manera si funciona, ya el input ya está procesado...
Sin embargo, con jquery puedes definir que el evento sea aplicado al input una vez esté cargada toda la página. Así:

Código HTML:

<body>
<script type="text/javascript">
$(document).ready(function(){ //cuando el document este cargado completamente

$("#filter").click(function(){
    alert('clicked!');
});

});                                            //-----

</script>	
	
<div id="borradivf">hergregre</div>
<input type="button" id="filter" name="filter" value="Filter" />

</body>
</html>

sirdaiz · #4 (**permalink**) 04/10/2013, 01:02

Gracias perfectto!