jQuery .on (‘clic’) vs. .click () y .delegate (‘click’)

Estoy acostumbrado a usar .click() y delegate('click') , así que cuando leí ambos fueron desaprobados en versiones recientes de jQuery, pensé que lo leería, pero me estoy rascando la cabeza un poco.

La documentación aquí parece sugerir que se trata de un reemplazo directo para .live () y .delegate () , pero .click () y .bind () tenían un comportamiento diferente, a saber, el enlace a objetos existentes actualmente, donde los otros vinculado a cualquier objeto que coincida con el patrón de selector 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 no tendrían oyentes vinculados al evento click con .click() , pero lo harían con .delegate() .

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

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() { // ... }); 

Se puede convertir en la siguiente 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() { // ... }); 

El método on puede reemplazar 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 los métodos de click , delegate ni bind han llegado a la página en desuso todavía. Dudo que el método click nunca lo haga.

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); } 

La documentación 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+ 

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