¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

¿live(), bind(), delegate() u on() en jQuery?

Con la llegada de jQuery 1.4, se introdujo el método .live en la librería, el cual parecía ser la solución a un problema común, asociar funciones gestoras de eventos a elementos que aun no estaban insertados en el DOM.

Por ejemplo:

$(function(){ 
  $('a.borrar').live('click', function() {
    //…
  }); 
});

Permite asociar una función que se ejecuta cada vez que un enlace con la clase borrar se le hiciera click. La gran ventaja es que era para los elementos actuales y futuros en el DOM. Esto es realmente útil cuando se trabaja con Ajax, insertando contenido dinámico en la web.

Lamentablemente, no todo el monte es orégano. El método live() está poco optimizado en cuanto a rendimiento se refiere. El problema principal que tenía, es que la selección se ejecutaba de manera inmediata (en cuanto el DOM estuviera cargado presumiblemente). Y la función que asociamos a una clase, se asociaba en realidad al propio elemento document. Esto hace que, cada vez que se ejecutara un click sobre el elemento document, se revisara si se había realizado contra un elemento que coincidiera con el selector. Imaginad esto en un gran documento y rápidamente veréis el problema.

En jQuery 1.7, de reciente liberación, la función ha quedado obsoleta y su uso no es recomendable. Realmente, todas las funciones indicadas en el título del artículo, apuntan desde 1.7 a on() y es muy probable que acaben por desaparecer.

¿Cómo usar live() o algo similar desde jQuery 1.7?

Tendremos que usar el método on(). El método on() es realmente recomendable a usar en casi todas las asociaciones a eventos en jQuery ya que su rendimiento es algo más elevado.

Por ejemplo:

$(function(){ 
  $('.borrar').click(function() {
    // …
  }); 
});

Es menos óptimo que usar

$(function(){ 
  $('.borrar').on('click', function() {
    // …
  }); 
});

Esto es porque jQuery usa on() internamente si usamos la primera forma por lo que, ¿para qué vamos a usar una especie de alias pudiendo usar el método primitivo?.

Pero no nos desviemos, si queremos que un gestor del evento click (por ejemplo) funcione con un elemento que sea cargado de manera dinámica, tenemos que establecer el evento al elemento ancestro más cercano (que no sea cargado de manera dinámica) y facilitarle el selector que coincida con el objeto dinámico al que queramos asociar la función.

Por ejemplo:

$(function(){ 
  $('.borrar').on('click', 'a.borrar', function() {
    // …
  }); 
});

¡Extra!

Es posible además usar otra sintaxis para asociar varios eventos a los mismos elementos. De esta forma:

$(function() {
  $('#tabla').on({
    click: function() {…},
    mouseenter: function() {…},
    mouseleave: function() {…}
  }, 'a.borrar');
});

De esta manera, aunque el contenido de #tabla cambie y aparezcan nuevos elementos, cualquier enlace con la clase borrar tendrá asociada el evento.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!