jQuery .on ('clic') vs. .click() y .delegate ('clic')

Question

Estoy acostumbrado a usar .click() y delegate('click'), así que cuando leí ambos quedaron obsoletos en las versiones recientes de jQuery, pensé que Lo leí, pero estoy rascándome la cabeza un poco.

La documentación here parece sugerir que esta es una gota en el reemplazo para .live() y .delegate(), pero .click() y .bind() tenido un comportamiento diferente, a saber vinculantes a los objetos existentes en la actualidad, donde los otros ligados a los objetos que coinciden con el selector patrón a lo largo de la vida útil del DOM.

En la mayoría de los casos, esto no supondría una gran diferencia, pero al agregar dinámicamente elementos a su DOM, esta es una distinción importante. Los objetos nuevos que coincidan con el patrón anterior serían no tienen oyentes vinculados al evento click usando .click(), pero serían con .delegate().

Mi pregunta es, ¿cómo se usa el método .on() para duplicar el comportamiento tanto del .delegate() preexistente como del .bind()? ¿O todo va en el futuro hacia el estilo .delegate()?

Answer 1

Ambos modos todavía son compatibles.

La siguiente llamada a bind():

$(".foo").bind("click", function() { 
    // ... 
}); 

Se puede convertir directamente en la siguiente llamada a on():

$(".foo").on("click", function() { 
    // ... 
}); 

Y la siguiente llamada a delegate():

$("#ancestor").delegate(".foo", "click", function() { 
    // ... 
}); 

puede ser convertido en el siguiente ing llamada a on():

$("#ancestor").on("click", ".foo", function() { 
    // ... 
}); 

Para completar, la siguiente llamada a live():

$(".foo").live("click", function() { 
    // ... 
}); 

se puede convertir en la siguiente llamada a on():

$(document).on("click", ".foo", function() { 
    // ... 
}); 

Answer 2

Puede deducir el uso de los alias del código fuente.

console.log($.fn.delegate); 
function (a, b, c, d) { 
    return this.on(b, a, c, d); 
} 

console.log($.fn.bind); 
function (a, b, c) { 
    return this.on(a, null, b, c); 
} 

El documentation también proporciona los ejemplos de uso:

$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(elements).on(events, selector, data, handler);  // jQuery 1.7+ 

Answer 3

.delegate() y .bind() utiliza on método. Y .click() es un shortcut para .on() también.

Answer 4

El método on puede reemplazar ambos bind y delegate dependiendo de cómo se usa (y también click como bind puede reemplazar eso):

.click(handler) == .on('click', handler) 

.bind('click', handler) == .on('click', handler) 

.delegate('click', '#id', handler) == .on('click', '#id', handler) 

Ni el click, delegate o bind métodos han llegado a la deprecated page todavía. Dudo que el método click lo haga.