[SOLUCIONADO] Método on() jQuery

alberto510a · #1 (**permalink**) 30/04/2013, 08:25

Hola a todos,

Soy nuevo en este foro y veo que está bastante bien. Me gustaría que me echarán una mano con un código que creé para la web que estoy programando.

Código:

<script>
jQuery(document).ready(function(){
	jQuery('#passive').on('click', function(event){
	   event.preventDefault();
	   jQuery('#grammarmain2').html('');
	   jQuery('#grammarmain').animate({height:'600px'},2000,function(){
	   jQuery('#grammarmain2').html('<h2 style="position:relative;left:10px;top:15px;">Passive</h2>');
	   });
		  });
});
</script>

La página donde se encuentra este código es la siguiente <http://www.coolenglish.tk/gr/grammar.php>

Este código lo hice para que al pulsar Tiempos>Passive se borrara el código del div aumentara su tamaño progresivamente y una vez terminado esto llamo a una función callback que le incorpora un nuevo texto.

Usé el método on() debido a que el elemento passive se crea al hacer click en tiempos y no está en el DOM desde el principio.
Quién lea esto puede entrar en la página que dejé arriba y echarle un vistazo a toda la función completa y ayudarme a encontrar el error.

Gracias.

Rosencrantz · #2 (**permalink**) 30/04/2013, 09:52

con on pasa lo siguiente, cuando el elemento aparece desde el principio en la pagina se usa como lo estas implementando pero cuando no es el caso por ejemplo al cargar el elemento través de ajax o al agregarlo dinamicamente desde jquery o javascript la implementacion de on es distinta y depende del contexto o del padre en el que este el elemento

Supongo que #passive es un tag <a>, supongamos que #passive esta dentro de un div llamado con id padre (#padre) (no es muy original el nombre lo se..) y #padre se carga desde el principio en la pagina asi #passive no este aun, asi que la implementacion de on seria la siguiente

Código:

$(#padre).on('click', 'a#passive', function(){

     // el resto del código.

});

Notas la diferencia? el on ahora recibe 3 parámetros, esto lo hace jquery para saber desde donde "revivir" los elementos en este caso #padre y no tener que hacerlo desde <body> lo cual no seria eficiente.

Para más información revisa .on en la pagina de jquery.

Saludos.

alberto510a · #3 (**permalink**) 30/04/2013, 10:08

Muchas gracias, me solucionaste el problema no sabía esa forma de actuar del método on().