jQuery delegate() y undelegate(): 2 funciones obsoletas

Las funciones de jQuery delegate() y undelegate() 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 bind – unbind() y live() – die().

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 delegate()

Con jQuery delegate() podemos asignar por defecto eventos a los diferentes elementos que tenemos en el DOM.

Vamos con las diferentes sintaxis que podemos usar extraídas de su web oficial:

$(selector).delegate(selectorDeNodo,evento,parametros,funcion)

1	$(selector).delegate(selectorDeNodo,evento,parametros,funcion)

Os explico los parámetros de la función:

selector (obligatorio): Elemento del DOM al que queremos asignar un evento.
evento (obligatorio): Evento que queremos controlar en el selector.
selectorDeNodo (opcional): Selección del nodo hijo dentro del elemento. Este nodo hijo debe de estar dentro de nodo especificado en selector.
parametros (opcional): Parámetros a pasar a la función.
funcion(obligatorio): Función a ejecutar cuando se produzca el evento.

Sintaxis de jQuery undelegate()

Con undelegate() eliminamos los eventos asignados previamente a los elementos del DOM, veamos su sintaxis extraída de su web oficial:

$(selector).undelegate(selector2,evento,funcion)

1	$(selector).undelegate(selector2,evento,funcion)

Repasemos la sintaxis:

selector (obligatorio): Elemento del DOM.
selector2 (obligatorio): Selección del nodo hijo dentro del elemento. Este nodo hijo debe de estar dentro de nodo especificado en selector.
evento (obligatorio): Evento que queremos controlar en el selector.
funcion(obligatorio): Función a ejecutar cuando se produzca el evento.

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

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

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

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

$(document).ready(function(){

$("body").delegate("#boton","click", function(){

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

});

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

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

});

Os explico el ejemplo:

Con delegate() controlo el click del elemento con id = ‘boton’ que tiene que estar dentro del elemento ‘body’ y saco un mensaje por pantalla. He exagerado al meter todo dentro del ‘body’, pero así se entiende mejor.
Con on() controlo el click del elemento con id = ‘boton2’ y saco un mensaje por pantalla.

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 undelegate() a jQuery off()

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

$("body").undelegate("#boton","click");

$("body").off("click", "#boton" );

$("body").undelegate("#boton","click");

$("body").off("click", "#boton" );

He realizado el ejemplo para eliminar el evento del ejemplo de delegate() y su equivalente con off().

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