delegate - on click jquery class

.live() vs.bind()

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuál es la diferencia entre los métodos bind y live en jQuery? 10 respuestas

Quiero saber la diferencia principal entre

.live() vs. .bind()

métodos en jQuery.

Answer 1

Debería considerar usar .delegate() lugar de .live() que sea posible. Como la delegación de eventos para .live() siempre se dirige al cuerpo / documento y usted puede limitar el "borboteo" con .delegate() .

Ver http://api.jquery.com

ACTUALIZAR

De jQuery :

A partir de jQuery 1.7, .delegate() ha sido reemplazado por el método .on() . Sin embargo, para versiones anteriores, .delegate() sigue siendo el medio más efectivo para usar la delegación de eventos.

Answer 2

Desde v1.7, .live, .bind y .delegate han sido reemplazados por .on http://api.jquery.com/on/

Yo también sentía curiosidad por la dificultad, así que escribí un artículo con algunos ejemplos de código. http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/ .

Suena como dependiendo de cómo llame a .on (), jquery imitará .bind, .live o .delegate. Esto le da a sus controladores de eventos una implementación más elegante.

Answer 3

Hice un análisis estadístico de .bind() vs .live() vs .delegate() usando FF Profiler. Hice 10 rondas de cada una (no una muestra suficiente para ser definitiva, pero ilustra el punto). Estos son los resultados.

1) Elemento estático único con una identificación usando el evento click:

.bind(): Mean = 1.139ms, Variance = 0.1276ms
.live(): Mean = 1.344ms, Variance = 0.2403ms
.delegate(): Mean = 1.290ms, Variance = 0.4417ms

2) Múltiples elementos estáticos con una clase común usando el evento click:

.bind(): Mean = 1.089ms, Variance = 0.1202ms
.live(): Mean = 1.559ms, Variance = 0.1777ms
.delegate(): Mean = 1.397ms, Variance = 0.3146ms

3) Múltiples elementos dinámicos (el primer botón crea el segundo ...) usando el evento click:

.bind(): Mean = 2.4205ms, Variance = 0.7736ms
.live(): Mean = 2.3667ms, Variance = 0.7667ms
.delegate(): Mean = 2.1901ms, Variance = 0.2838ms

Interprete cómo desee, pero me parece que a medida que los elementos dinámicos aumentan en una página, .delegate () parece tener el mejor rendimiento mientras que los elementos estáticos funcionan mejor con .bind ().

Tenga en cuenta que estoy usando un evento de clic muy simple que activa una alerta. Las diferentes páginas, con diferentes entornos (es decir, CPU, navegación de múltiples pestañas, ejecución de subprocesos, etc.) arrojarán resultados diferentes. Utilicé esto como una guía básica para mi decisión de usar uno u otro. Por favor, indique si ha obtenido un resultado diferente.

¡Gracias!

Answer 4

La principal diferencia es que live funcionará también para los elementos que se crearán después de que la página se haya cargado (es decir, mediante su código de JavaScript), mientras que bind solo vinculará los manejadores de eventos para los elementos actualmente existentes.

// BIND example
$(''div'').bind(''mouseover'', doSomething);
// this new div WILL NOT HAVE mouseover event handler registered
$(''<div/>'').appendTo(''div:last'');
// LIVE example
$(''div'').live(''mouseover'', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$(''<div/>'').appendTo(''div:last'');

Actualizar:

jQuery 1.7 desaprovechó el método live() y 1.9 lo eliminó. Si desea lograr la misma funcionalidad con 1.9+ necesita usar un nuevo método on() que tiene una sintaxis ligeramente diferente cuando se invoca en el objeto del documento y el selector se pasa como un parámetro. Por lo tanto, el código de arriba convertido a esta nueva forma de vincular eventos se verá así:

// ON example
$(document).on(''mouseover'', ''div'', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$(''<div/>'').appendTo(''div:last'');