jQuery: on, live, bind, click, …

En jQuery a la hora de asociar eventos a elementos del DOM surge la duda de cual utilizar. Por ejemplo si al boton

<button class="botonActivo">haz click</button>

queremos asociarle el evento click podriamos hacerlo de las siguientes maneras:

$('.botonActivo').click(function(){
  console.log( $(this).text() );
});

o bien

$('.botonActivo').on('click', function(){
  console.log( $(this).text() );
});

Va a dar exactamente igual cual uses. Ahora bien, jQuery desde su version 1.8 recomienda el uso de on() para asociar eventos  aunque sigue dando soporte para el “atajo” click.

Ahora vamos a clonar el boton e incluirlo en el DOM.

$('.botonActivo').on('click', function(){
  console.log( $(this).text() );
  $(this).clone().appendTo('body');
});

Si pulsamos sobre ese nuevo boton que ha aparecido no ocurrirá nada. No tiene ninguna acción asociada. En este caso, el de clonar, si queremos hacerlo para que contenga sus acciones asociadas a eventos tendremos que hacerlo pasándole true como parametro a clone().

$('.botonActivo').on('click', function(){
console.log( $(this).text() );
$(this).clone(true).appendTo('body');
});

El nuevo boton ahora clonaria otro mas.

 

Otra forma de hacer que los elementos que se incorporan al DOM una vez cargada la pagina tengan event handlers seria utilizando el metodo live().

$('.botonActivo').live('click', function(){
  console.log( $(this).text() );
  $(this).clone().appendTo('body');
});

Ahora no seria necesario incluir el parametro true a clone(). Ten en cuenta que el uso de live(), si no lo tenemos bien controlado, puede ser contraproducente.

Lo siguiente es ver el caso para deletegate(). Supongamos que tenemos el siguiente codigo HTML:

<div class="container">
  <button>boton</button>
  <button>boton</button>
</ul>

y el siguiente javascript:

$('.container').delegate('button','click',function(){
  $(this).clone().appentTo('body');
});

El nuevo boton no tendra asociado ningún event handler. Es así porque el appendTo() se realiza al body, si se realiza dentro del contexto del .container, si quedaría asociado a su tratamiento de eventos. Es decir, así:

$('.container').delegate('button','click',function(){
  $(this).clone().appentTo('.container');
});

Conviene saber que delegate en realidad utiliza live(), aunque dentro de un contexto determinado.

Si utilizamos bind(), que va cayendo en desuso, actualmente jQuery llama a on().

Ahora es cosa tuya decidir cual te conviene usar. Eso si, no conviene utilizar de forma indiscriminada live() para todo ya que consume  mas recursos que on(). Habría que estudiar bien la casuística.

Recuerda que a veces no hay que volverse loco y que seguimos pudiendo usar el tradicional onclick que llama a una function definida en javascript.

jQuery: on, live, bind, click, …

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s