Método live() para definir eventos en jQuery: cómo crear eventos sobre elementos que coincidan con un selector, en el momento actual o en el futuro.
El método live() funciona de manera similar al método bind() de jQuery, con la particularidad que la asignación del evento es "dinámica" y afecta no sólo a los elementos que casen con el selector en el momento de la invocación, sino también todos los elementos que se puedan definir en un futuro y que casen con ese selector.
No sé si se habrá podido entender exactamente lo que se consigue con live(), pero lo podemos ver con un ejemplo sencillo que lo aclarará todo. Veamos esta sentencia:
$(".miclase").bind("click", mifuncion);
Está definiendo un evento "click" sobre todos los elementos de la clase (class de CSS) "miclase". Hasta aquí ya debemos de conocer todos esta el método bind(), por lo que no debería haber ningún problema, pero ahora veamos esta misma sentencia pero utilizando el método live().
$(".miclase").live("click", mifuncion);
Esto sirve para lo mismo que hacíamos con bind(), pero además afectará a todos los elementos que puedan tener la clase "miclase" en el futuro y no sólo en el momento que se ejecuta esa sentencia.
¿Cómo puede haber otros elementos de esa clase en el futuro? Pues simplemente porque los crees dinámicamente con jQuery o porque asignes dinámicamente una clase CSS, u otro atributo, a un elemento que no la tenía, o que traigas por Ajax un contenido y que tenga elementos que casen con el selector, etc.
Ejemplo de asignación de manejador de evento por live()
Veamos la siguiente demostración del funcionamiento de live(). Tenemos varios elementos:
<div class="verde">Esta capa tiene la clase verde (haz clic)</div>
<div class="verde">Segunda capa donde coloco la clase verde</div>
<div id="noverde">Tercera capa que no es verde</div>
<div class="verde">Otra con clase verde</div>
Sin varias divisiones donde todas menos una tienen la clase "verde". Veamos como puedo asignar un evento de tipo "click" por medio del método live():
$(".verde").live("click", function(e){
var elem = $(this);
if (elem.html()!="Hiciste clic!!"){
elem.html("Hiciste clic!!");
}else{
elem.html("Hiciste de nuevo clic!!");
}
});
Es un evento que permite cambiar el texto del elemento cuando se pulsa sobre él y lo aplicamos sobre todos los elementos de la clase "verde".
Ahora tenemos un par de botones para hacer cosas con la página y cambiarla un poco.
<input type=button value="insertar nuevo elemento verde" id="insertarelem">
<input type=button value="Poner la clase verde en el div que no la tiene" id="ponerclaseverde">
Cuando se pulse el primer botón, voy a insertar un nuevo elemento en la página al que le pondremos la clase "verde". Eso lo consigo con este código:
$("#insertarelem").click(function(e){
var nuevoElemento = $('<div class="verde">Elemento creado e insertado dinamicamente</div>');
nuevoElemento.appendTo($(document.body));
});
Los elementos que se creen al apretar ese botón tendrán la clase verde y por tanto la funcionalidad especificada con el método live() para definir el evento clic.
El segundo botón asigna la clase "verde" al elemento DIV del principio, que no la tenía, lo que conseguimos así:
$("#ponerclaseverde").click(function(e){
$("#noverde").addClass("verde");
});
Al asignar esa clase al elemento también se aplicará la funcionalidad definida para el evento click con live().
Esto lo podemos ver en funcionamiento en una página aparte.
Para acabar, dejamos el código completo de esta página de ejemplo de live() en jQuery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title>Eventos live</title>
<style type="text/css">
.verde{color: green;}
</style>
<script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".verde").live("click", function(e){
var elem = $(this);
if (elem.html()!="Hiciste clic!!"){
elem.html("Hiciste clic!!");
}else{
elem.html("Hiciste de nuevo clic!!");
}
})
$("#insertarelem").click(function(e){
var nuevoElemento = $('<div class="verde">Este elemento se ha creado e insertado dinamicamente (haz clic)</div>');
nuevoElemento.appendTo($(document.body));
});
$("#ponerclaseverde").click(function(e){
$("#noverde").addClass("verde");
});
})
</script>
</head>
<body>
<div class="verde">Esta capa tiene la clase verde (haz clic)</div>
<div class="verde">Segunda capa donde coloco la clase verde</div>
<div id="noverde">Tercera capa que no es verde</div>
<div class="verde">Otra con clase verde</div>
<input type=button value="insertar nuevo elemento verde" id="insertarelem">
<input type=button value="Poner la clase verde en el div que no la tiene" id="ponerclaseverde">
</body>
</html>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...