Por que usar jQuery on () en lugar de click ()

Actualmente con jQuery, cuando necesito hacer algo cuando ocurre un clic, lo haré así ...

$(".close-box").click( function() {
    MoneyBox.closeBox();
    return false;
});

Estaba mirando un código que alguien más tiene en un proyecto y lo hacen así ...

$(".close-box").live("click", function () {
    MoneyBox.closeBox();
    return false;
});

Tenga en cuenta que, por lo que puedo decir, parece hacer lo mismo, excepto que están usando la función live () que ahora está obsoleta y los documentos de jQuery dicen que use on()en su lugar, pero de cualquier manera, ¿por qué usar live / on () en lugar de mi primer ejemplo?

Debido a que es posible que tenga elementos generados dinámicamente (por ejemplo, provenientes de una llamada AJAX), es posible que desee tener el mismo controlador de clic que anteriormente estaba vinculado al mismo selector de elementos, luego "delega" el evento de clic on()con el argumento del selector

Demostrar:

http://jsfiddle.net/AJRw3/

on()también puede ser sinónimo de click()si no tiene un selector especificado:

$('.elementClass').click(function() { // code 
});

es sinónimo de

$('.elementClass').on('click', function() { // code
});

En el sentido de que solo agrega el controlador una vez a todos los elementos con clase elementClass. Si tiene un nuevo elementClassproveniente, por ejemplo $('<div class="elementClass" />'), el controlador no estará vinculado a ese nuevo elemento, debe hacer:

$('#container').on('click', '.elementClass', function() { // code
});

Suponiendo que #containeres .elementClassel antepasado

Hay muchas respuestas, cada una de las cuales toca algunos puntos; con suerte, esto puede darle su respuesta, con una buena explicación de qué es qué y cómo usarlo.

El uso click()es un alias de bind('click' ...). El uso bind()toma el DOM como está cuando se está configurando el detector de eventos y vincula la función a cada uno de los elementos coincidentes en el DOM. Es decir, si usa $('a').click(...), vinculará la función proporcionada al evento de clic de cada etiqueta de anclaje en el DOM que se encuentre cuando se ejecute ese código.

Usar live()era la forma antigua en jQuery; se usó para vincular eventos como lo bind()hace, pero no solo los vincula a elementos en el DOM cuando se ejecuta el código, sino que también escucha los cambios en el DOM y vinculará eventos a cualquier elemento que coincida en el futuro. Esto es útil si está manipulando el DOM y necesita que exista un evento en algunos elementos que pueden eliminarse / actualizarse / agregarse al DOM más adelante, pero no existen cuando se carga el DOM por primera vez.

La razón por la que live()ahora se deprecia es porque se implementó de manera deficiente. Para usarlo live(), tenía que poder seleccionar al menos un elemento en el DOM inicialmente (creo). También provocó que se vincule una copia de la función a cada elemento, y si tiene 1000 elementos, son muchas funciones copiadas.

La creación de la on()función fue superar esos problemas. Le permite vincular un solo detector de eventos a un objeto que no cambiará en el DOM (por lo que no puede usar on()en un elemento que se eliminará / agregará al DOM más adelante; vincúlelo a un objeto principal) y simplemente aplique un elemento "filtro" para que la función solo se ejecute cuando se expanda a un elemento que coincida con el selector. Esto significa que solo tiene una función que existe (no un montón de copias) ligada a un solo elemento - un enfoque mucho mejor para agregar eventos "en vivo" en el DOM.

... y esas son las diferencias, y por qué existe cada función y por qué live()se deprecia.

• $("a").live()-> Se aplicará a todos <a>, incluso si se crea después de que se llame.
• $("a").click()-> Solo se aplicará a todos <a>antes de que se llame. (Este es un atajo de bind()y on()en 1.7)
• $("a").on()-> Proporciona toda la funcionalidad necesaria para adjuntar controladores de eventos. (Lo más nuevo en jQuery 1.7)

Cotizaciones :

A partir de jQuery 1.7, el método .live () está obsoleto. Utilice .on () para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en lugar de .live ().
Este método proporciona un medio para adjuntar controladores de eventos delegados al elemento de documento de una página, lo que simplifica el uso de controladores de eventos cuando el contenido se agrega dinámicamente a una página. Consulte la discusión de eventos directos versus delegados en el método .on () para obtener más información.

El método .on () adjunta controladores de eventos al conjunto de elementos seleccionado actualmente en el objeto jQuery. A partir de jQuery 1.7, el método .on () proporciona todas las funciones necesarias para adjuntar controladores de eventos.

Para versiones anteriores, el método .bind () se usa para adjuntar un controlador de eventos directamente a los elementos.

click()es un atajo al método de no delegación de on(). Entonces:

$(".close-box").click() === $(".close-box").on('click')

Para delegar eventos con on(), es decir. en objetos dinámicos creados puede hacer:

$(document).on('click', '.close-box') // Same as $('.close-box').live()

Pero, on()introduce la delegación en cualquier elemento estático, no solo documentcomo lo live()hace, entonces:

$("#closestStaticElement").on('click', '.close-box')

Debería leer sobre la diferencia entre liveybind .

En pocas palabras, liveutiliza la delegación de eventos, lo que le permite vincularse a elementos que existen ahora y en el futuro.

Por el contrario, los controladores adjuntos a través de bind(y sus atajos, como click) adjuntan controladores directamente a los elementos DOM que coinciden con el selector y, por lo tanto, solo están vinculados a elementos que existen ahora.

Una consecuencia de livela flexibilidad de 'es un rendimiento reducido, por lo que solo úselo cuando necesite la funcionalidad que proporciona.

$el.click(fn) es un atajo para $el.on('click', fn)

Consulte http://api.jquery.com/click/ y http://api.jquery.com/on/ para obtener más información.

Cuando necesite vincular algunos controladores de eventos dynamically added elements, debe usar live(en desuso) o onhacer que funcione. Simplemente $('element').click(...);no funcionará en ningún elemento agregado dinámicamente al DOM.

Más sobre la diferencia entre .bind (), .live () y .delegate () de jQuery .

$ .click () es simplemente un atajo para bind o on. De los documentos de jQuery:

En las dos primeras variaciones, este método es un atajo para .bind ("clic", controlador), así como para .on ("clic", controlador) a partir de jQuery 1.7. En la tercera variación, cuando se llama a .click () sin argumentos, es un atajo para .trigger ("clic").

El .on()método adjunta controladores de eventos al conjunto de elementos seleccionado actualmente en el objeto jQuery. El click()método vincula un controlador de eventos al evento de JavaScript "clic" o desencadena ese evento en un elemento.

A simple vista, .click(...si el objetivo del selector cambia sobre la marcha (por ejemplo, a través de alguna respuesta ajax), entonces deberá asignar el comportamiento nuevamente.

El .on(...es muy nuevo (jQuery 1.7) y puede cubrir el escenario en vivo usando eventos delegados que es una forma más rápida de adjuntar comportamiento de todos modos.

En el onmétodo, el controlador de eventos se adjunta al elemento principal en lugar de al destino.

ejemplo: $(document).on("click", ".className", function(){});

En el ejemplo anterior, el controlador de eventos de clic se adjunta al documento. Y utiliza la propagación de eventos para saber si alguien hizo clic en el elemento de destino.