jQuery / Ajax y los eventos

Bienvenidos sean a este post, hoy veremos un tema muy particular.

No confundir el evento Ajax con Ajax y los posibles eventos en la pagina, para trabajar con estos vamos a tomar el codigo que vimos en este post, pero sino lo tienen deberan descargarlo pero poder probarlo antes deberan tener un servidor web, sino poseen alguno les recomiendo primero visitar este post:

En este post les comento como crear una pc virtual y le instalamos un linux debian, una vez realizado esto les recomiendo el siguiente post:

En este otro post veremos como instalar Apache y PHP para poder correr el proyecto, y de forma opcional pueden instalar mariadb pero no es obligatorio, con esto realizado descarguen el siguiente codigo:

Una vez descargado extraigan todos los archivos y pasenlos al servidor, cuando hayan realizado esto vamos a proceder a trabajar con el archivo codigo.js y agregaremos el siguiente codigo:

$(document).ready(function() {
	$('h3.nombre').click(function() {
		$(this).siblings('.resumen').slideToggle();
	});
});

En este caso asociamos el evento click al nombre que aparece en cada resultado de la devolucion de Ajax, y en este caso escondera o mostrara el resumen, pero si lo prueban no funcionara porque al momento de querer asociarlo el elemento no existe por lo tanto no se realiza, este puede ser un error tipico de interpretacion pero para solucionarlo modifiquemos el codigo anterior de la siguiente manera:

$(document).ready(function() {
	$('body').on('click', 'h3.nombre', function() {
		$(this).siblings('.resumen').slideToggle();
	});
});

En este caso cambiamos a quien aplicarle el evento, en lugar de un elemento lo hacemos en el body pero tambien cambiamos como aplicarlo, porque de esta forma podemos especificar a que elemento aplicarlo dentro del body, despues la funcion sigue siendo la misma, probemos a ver como funciona mediante el siguiente video

Como pueden ver de una manera muy simple pudimos aplicar este efecto a todos los nombres de cada una de las opciones disponibles y funciona perfectamente, mas alla de se haya cargado o no el elemento, antes de finalizar les dejo un archivo con todos los archivos necesarios y codigos finales en este post:

En resumen, hoy hemos visto como agregar eventos a los datos devueltos por Ajax, en este caso primero de una forma erronea y como despues solucionarlo y de una forma simple pasa a todos los disponibles, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.