jueves, 20 de octubre de 2011

Asignar eventos con .live() de Jquery

Bueno supongo que todos hemos utilizado la asignación de eventos con Jquery, más de alguna vez hemos necesitado asignarle un evento a una etiqueta de nuestro código html. Para ello existen varias formas.

Por ejemplo consideremos el siguiente html:
<body>
     <div class="clickeame">Click Aquí</div>
</body>


Para asignarle un evento podríamos usar el método abreviado con el siguiente código:
$(".clickeame").click(function(){
     alert("Click");
});

También podríamos asignarle un evento utilizando el método .bind(), usando el siguiente código:
$(".clickeame").bind("click", function(){
     alert("Click");
});

El método .bind() sirve para agregar manejadores de eventos a los elementos. Pero que pasa si en nuestra pagina agregamos más elementos con la clase ".clickeame" de forma dinámica, por ejemplo:
$('body').append('<div class="clickeame">Otro Click Aquí</div>');

El elemento es de la clase ".clickeame" pero fue agregado después de llamar al método .bind(), y hacemos click sobre el elemento y no pasa nada, el método .live() provee una solución para este problema, declarando el evento para la clase ".clickeame" usando este método:
$(".clickeame").live("click", function(){
     alert("Click");
});

Ahora cada vez que agreguemos un elemento de la clase ".clickeame" desencadera el manejador. Ya que el método .live() asigna un manejador al evento para todos los elementos que coincidan con el selector, ahora y en el futuro.

No hay comentarios:

Publicar un comentario

haz tu comentario