Eventos definidos con live() en jQuery

  • Por
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.
Hemos visto muchas técnicas para definir y tratar eventos en jQuery a lo largo de los artículos anteriores del Manual de jQuery. Para seguir explorando las posibilidades de este framework Javascript vamos a aprender ahora a definir eventos "live". Es algo así como una definición de evento "en directo" o durante toda la "vida" de la página, es decir, una definición de un evento sobre los elementos actuales y futuros que casen con un selector.

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>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

16/9/2010
Definición de eventos.
Excelente artículo, soy principiante en jQuery, esa función me hubiera salvado horas de trabajo hace una semana jajaja, la tendré en cuenta de ahora en adelante.

ramsay_ra

16/9/2010
Increible pero cierto
llevo como 1 a~no o 2 desarrollando con jquery y no conocia este metodo..... gracias !

Juan Carlos

27/9/2010
Pregunta
Se pueden crear otros eventos que no sean click, pueden poner un ejemplo. Gracias.

alejandro

07/11/2011
gracias!
Excelente articulo!, hace rato que venia tratando de entender este metodo y no lo lograba. Muchas Gracias!

Alexis Advance

14/8/2012
Este método está obsoleto
A las personas que están leyendo este artículo por primera vez, y para aquellos que hacen uso desde hace tiempo del método .live(), les comento que este método se encuentra actualmente obsoleto. En su lugar deben usar el método .delegate() ?desde las versiones jQuery 1.4.3+ de jQuery? o, mejor aún, el método .on() ?desde las versiones jQuery 1.4.3+ de jQuery?.

Lean sobre ellos en la documentación oficial de jQuery (lamentablemente sólo está disponible en inglés).


¡Saludos!

Alexis Advance

14/8/2012
Alexis Advance
Sobre mi comentario anterior, los signos de cierre de interrogación (?) que se ven en él son, en realidad, rayas (vulgarmente conocidas como «guiones largos»). El problema es que el sitio Desarrolloweb no recibe correctamente este carácter en sus comentarios y lo imprime como si fuese un signo de cierre de interrogación. (A ver si corrigen pronto este error, pues ya lleva bastante tiempo).

Saludos nuevamente.

Paola

22/8/2013
BUENISIMO
buenísimo tu aporte muchas gracias . Sabes ando buscando algo asi pero pasando parámetros conoces algún ejemplo?
desde ya muchas gracias

Nickso

29/2/2016
.on() reemplaza a .live()
A partir de jQuery 1.9 en adelante se reemplaza .live() por .on()
Por ende, el ejercicio que dice:
$(".verde").live("click",function(e)

Debe ser:
$(document).on("click",".verde",function(e).

O sea que ademas toma otros argumentos.