jQuery live() y die(): Funciones obsoletas a sustituir por on() y off()

Las funciones de jQuery live() y die() quedaron obsoletas en la versión 1.7 de jQuery. Estas funciones asignan y eliminan eventos en los elementos del DOM.

En este post vamos a ver su sintaxis y ejemplos para sustituirlas por las funciones on() y off() que son las validas a partir de la 1.7.

Este mismo caso ocurre con las funciones delegate() – undelegate() y bind() – unbind().

Os recomiendo leer el post ‘jQuery on() y off(): Asignar de eventos a elementos del DOM‘ para ver el potencial de estas 2 funciones.

Sintaxis de jQuery live()

La función live() asigna eventos a los diferentes elementos del DOM. Vamos a ver la sintaxis de esta función extraída de su web oficial:

$(selector).live(evento, parametros, funcion)

1	$(selector).live(evento, parametros, funcion)

Repasemos los parámetros de la función:

selector (obligatorio): Elemento que queremos controlar.
evento (obligatorio): Evento que queremos controlar y asignar al elemento.
parametros (opcional): Parámetros a pasar a la función.
funcion (obligatorio): Función a ejecutar cuando el evento se produce.

Sintaxis de jQuery die()

die() elimina los eventos asignados previamente a elementos del DOM. Vamos a ver su sintaxis extraída de su web oficial:

$(selector).die(evento, funcion)

1	$(selector).die(evento, funcion)

Y ahora repasamos los parámetros:

selector (obligatorio): Elemento al que queremos eliminar el evento.
evento (obligatorio): Evento que queremos eliminar.
funcion (obligatorio): Función a ejecutar.

Ejemplo para migrar de jQuery live() a jQuery on()

Vamos a ver con este ejemplo cómo cambiar de una función a otra es muy sencillo:

$(document).ready(function(){
	$("#boton").live("click",function(){
    		alert('Has hecho click en el botón de jQuery live()');
  	});

	$("#boton2").on("click",function(){
		alert('Has hecho click en el botón de jQuery on()');
	});
});

$(document).ready(function(){

$("#boton").live("click",function(){

alert('Has hecho click en el botón de jQuery live()');

});

$("#boton2").on("click",function(){

alert('Has hecho click en el botón de jQuery on()');

});

Os explico los códigos:

En la primera comprobación vemos que se detecta con live() el click en el elemento con id=’boton’, en ese caso sacamos un mensaje por pantalla.
La segunda comprobación el casi idéntica, se detecta con on() el click del elemento con id=’boton2′, también se saca mensaje por pantalla.

Como podéis apreciar la sintaxis es muy similar, el código HTML de los botones es este:

<input type="button" name="boton" id="boton" value="Clíckame">

<input type="button" name="boton2" id="boton2" value="Clíckame">

Ejemplo para migrar de jQuery die() a jQuery off()

Vamos a ver con estas 2 líneas de código cómo migrar de una función a otra:

$("#boton").die(); 
$("#boton").off();

1 2	$("#boton").die(); $("#boton").off();

Como podéis apreciar, es trivial cambiar de una función a otra.

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

jQuery selectors: Cómo seleccionar o controlar elementos del DOM