trigger change jquery bind live

change - ¿Cuál es la diferencia entre los métodos bind y live en jQuery?



jquery trigger change (10)

.bind () ataca eventos a elementos que existen o coinciden con el selector en el momento en que se realiza la llamada. Cualquier elemento creado después o que coincida en el futuro porque la clase fue modificada, no activará el evento enlazado.

.live () funciona para elementos coincidentes existentes y futuros. Antes de jQuery 1.4, esto se limitaba a los siguientes eventos: hacer clic, clicar mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

Tengo curiosidad por conocer las diferencias entre las funciones de enlace y directo.

Para mí, parecen ser casi idénticos.

Leí los beneficios de los métodos live / bind , pero no me habló de las diferencias ...

¡Gracias!

Además de lo que dijeron, creo que lo mejor es intentar mantener el bind cuando / donde sea posible y usarlo en live solo cuando sea necesario.

Aquí se discute la diferencia entre live y livequery.

Bind vinculará eventos al patrón especificado, para todas las coincidencias en el DOM actual en el momento en que lo llame. Live vinculará eventos al patrón especificado para el DOM actual y para futuras coincidencias en el DOM, incluso si cambia.

Por ejemplo, si enlaza $ ("div"). Bind ("hover", ...) se aplicará a todos los "div" s en el DOM en ese momento. Si luego manipulas el DOM y agregas un "div" adicional, no tendrá ese evento de vuelo estacionario. Usar live en lugar de bind también enviaría el evento al nuevo div.

En resumen: .bind() solo se aplicará a los elementos que haya seleccionado actualmente en su objeto jQuery. .live() se aplicará a todos los elementos coincidentes actuales, así como a los que pueda agregar en el futuro.

La diferencia subyacente entre ellos es que live() hace uso del evento de burbujeo . Es decir, cuando haces clic en un botón, ese botón puede existir en un <p> , en un <div> , en un elemento <body> ; así que, en efecto, en realidad estás haciendo clic en todos esos elementos al mismo tiempo.

live() funciona al adjuntar su controlador de eventos al documento , no al elemento . Cuando hace clic en ese botón, como se ilustró anteriormente, el documento recibe el mismo evento de clic. A continuación, busca una copia de seguridad de la línea de elementos orientados por el evento y comprueba si alguno de ellos coincide con su consulta.

El resultado de esto es doble: en primer lugar, significa que no tiene que continuar volviendo a aplicar eventos a elementos nuevos, ya que se agregarán implícitamente cuando ocurra el evento. Sin embargo, lo más importante (dependiendo de su situación), ¡significa que su código es mucho más ligero! Si tiene 50 etiquetas <img> en la página y ejecuta este código:

$(''img'').click(function() { /* doSomething */ });

... entonces esa función se copia en cada uno de esos elementos. Sin embargo, si tuviera este código:

$(''img'').live(''click'', function() { /* doSomething */ });

... entonces esa función se almacena solo en un lugar (en el documento) y se aplica a lo que coincida con su consulta en el momento del evento.

Sin embargo, debido a este comportamiento burbujeante, no todos los eventos se pueden manejar de esta manera. Como observó Ichiban, estos eventos compatibles son clic, clic con el mouse, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

Hay una manera de obtener el efecto en vivo, pero es algo desagradable.

$ (this) .unbind (''mouseout''). bind (''mouseout'', function () {});

esto borrará lo anterior y restablecerá el nuevo. Me ha funcionado bien a lo largo del tiempo.

Quería agregar a esto después de tener que depurar un poco debido a mi propia tontería. Apliqué .live () a una clase de botón en mi página, suponiendo que simplemente mostraría la identificación correcta que intentaba pasar en la cadena de consulta y haría lo que quería hacer con la llamada ajax. Mi aplicación ha agregado botones dinámicamente asociados con un elemento del inventario. Por ejemplo, desglosa las categorías en el botón ''COKE'' para agregar una cocaína a tu pedido. Profundice desde la parte superior nuevamente y agregue ''BUDLITE'' - cada vez que desee que esos elementos se ingresen en una tabla a través de una llamada AJAX.

Sin embargo , como até .live () a toda la clase de botones, recordaría cada llamada ajax que había hecho y volvería a dispararla para cada botón siguiente. Fue un poco complicado porque no estaba exactamente claro sobre la diferencia entre bind y live (y la respuesta anterior es muy clara), así que pensé en poner esto aquí por si alguien estaba haciendo una búsqueda sobre esto. .

Todos estos métodos jQuery se usan para unir eventos a selectores o elementos. Pero todos son diferentes el uno del otro.

.bind (): este es el método más fácil y rápido para enlazar eventos. Pero el problema con bind () es que no funciona para elementos añadidos dinámicamente que coinciden con el mismo selector. bind () solo adjunta eventos al elemento actual no elemento futuro. Por encima de eso, también tiene problemas de rendimiento cuando se trata de una gran selección.

.live (): este método supera la desventaja de bind (). Funciona para elementos añadidos dinámicamente o elementos futuros. Debido a su bajo rendimiento en páginas grandes, este método está en desuso a partir de jQuery 1.7 y debe dejar de usarlo. El encadenamiento no se admite correctamente con este método.

Descubre más here

imaginar este escenario:

  1. tengo varios elementos <img> .
    • $(''img'').bind(''click'', function(){...});
    • agregue algunas imágenes adicionales (usando get() , o html() , cualquier cosa)
    • las nuevas imágenes no tienen ningún enlace !!

por supuesto, dado que las nuevas imágenes no existían cuando hiciste $(''img'')... en el paso 2, no enlazó el controlador de eventos con ellas.

ahora, si haces esto:

  1. tengo varios elementos <img> .
    • $(''img'').live(''click'', function(){...});
    • agregue algunas imágenes adicionales (usando get() , o html() , cualquier cosa)
    • las nuevas imágenes tienen el enlace !!

¿magia? solo un poco. de hecho, jQuery vincula un manejador de eventos genérico a otro elemento superior en el árbol DOM (body? document? no idea) y permite que el evento se active. cuando llega al controlador genérico, comprueba si coincide con sus eventos live() y, de ser así, se activan, sin importar si el elemento se creó antes o después de la llamada live() .