metodo - jquery.live(''clic'') vs.click()
on click jquery (11)
Me pregunto si hay alguna circunstancia en la que sería mejor usar .click(function {...}); en lugar de .live(''click'', function {...}); ?
Por lo que veo, la opción en vivo parece ser una mejor opción y, por lo tanto, la estoy usando en casi todas las circunstancias en lugar del simple .click (), especialmente dado que gran parte de mi código se carga de forma asíncrona.
EDITAR: Otra parte de esta pregunta. Si estoy cargando de forma asíncrona todos los javascript, .click aún recogerá todos los elementos que ya están en el dom. ¿Derecha?
"en vivo" es necesario cuando dinámicamente genera código. Solo mira el siguiente ejemplo:
$("#div1").find(''button'').click(function() {
$(''<button />'')
.text(''BUTTON'')
.appendTo(''#div1'')
})
$("#div2").find(''button'').live("click", function() {
$(''<button />'')
.text(''BUTTON'')
.appendTo(''#div2'')
})
button {
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="div1">
<button>Click</button>
</div>
<div id="div2">
<button>Live</button>
</div>
sin "en vivo", el evento click ocurre solo cuando se presiona el primer botón, con "live" el evento click ocurre también para los botones generados dinámicamente
( Nota 29/08/2017: live fue desaprobado hace muchas versiones y eliminado en v1.9. El delegate quedó obsoleto en v3.0. En ambos casos, utilice la firma de delegación de .on() [también se cubre a continuación].)
live sucede al capturar el evento cuando se bordea todo el DOM hasta la raíz del documento, y luego se mira el elemento de origen. click pasar al capturar el evento en el elemento en sí. Por lo tanto, si está utilizando en live , y uno de los elementos ancestrales está enganchando el evento directamente (y evitando que siga burbujeando), nunca verá el evento en su elemento. Mientras que, normalmente, el elemento más cercano al evento (clic o lo que sea) primero lo capta, la combinación de eventos live live y no en live puede cambiar eso de manera sutil.
Por ejemplo:
jQuery(function($) {
$(''span'').live(''click'', function() {
display("<tt>live</tt> caught a click!");
});
$(''#catcher'').click(function() {
display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
return false;
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
<div>
<span>Click me</span>
<span>or me</span>
<span>or me</span>
<div>
<span>I''m two levels in</span>
<span>so am I</span>
</div>
<div id=''catcher''>
<span>I''m two levels in AND my parent interferes with <tt>live</tt></span>
<span>me too</span>
</div>
</div>
<!-- Using an old version because `live` was removed in v1.9 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Recomiendo usar delegate over live cuando pueda, para que pueda controlar más exhaustivamente el alcance; con delegate , usted controla el elemento raíz que captura el evento de burbujeo (p. ej., live es básicamente delegate usando la raíz del documento como raíz). Además, recomendamos evitar (cuando sea posible) delegate o interactuar en live con el manejo de eventos no delegados ni en vivo.
Aquí, varios años después, no usarías ni en live ni delegate ; usaría la firma de delegación de on , pero el concepto sigue siendo el mismo: el evento está enganchado en el elemento al que llama, pero luego se activa solo cuando los descendientes coinciden con el selector dado después del nombre del evento:
jQuery(function($) {
$(document).on(''click'', ''span'', function() {
display("<tt>live</tt> caught a click!");
});
$(''#catcher'').click(function() {
display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
return false;
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
<div>
<span>Click me</span>
<span>or me</span>
<span>or me</span>
<div>
<span>I''m two levels in</span>
<span>so am I</span>
</div>
<div id=''catcher''>
<span>I''m two levels in AND my parent interferes with <tt>live</tt></span>
<span>me too</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
.live () se usa si los elementos se agregan después de la carga de la página inicial. Supongamos que tiene un botón que se agrega mediante una llamada AJAX después de que se carga la página. No se podrá acceder a este nuevo botón con .click (), por lo que deberá usar .live (''clic'')
Además de la respuesta de TJ Crowders , he agregado algunos controladores más, incluido el controlador .on(...) al fragmento para que pueda ver qué eventos se ocultan y cuáles no.
Lo que también encontré es que .live() no solo está en desuso, sino que se eliminó desde jQuery 1.9.x. Pero los otros, es decir,
.click , .delegate / .undelegate y .on / .off
todavía están allí.
También tenga en cuenta que hay más discusión sobre este tema aquí en .
Si necesita corregir el código heredado que se basa en .live, pero necesita usar una nueva versión de jQuery (> 1.8.3), puede solucionarlo con este fragmento de código:
// fix if legacy code uses .live, but you want to user newer jQuery library
if (!$.fn.live) {
// in this case .live does not exist, emulate .live by calling .on
$.fn.live = function(events, handler) {
$(this).on(events, null, {}, handler);
};
}
La intención del siguiente fragmento, que es una extensión del script de TJ, es que puedes probar por ti mismo instantáneamente qué sucede si unes múltiples manejadores, así que ejecuta el fragmento y haz clic en los textos a continuación:
jQuery(function($) {
// .live connects function with all spans
$(''span'').live(''click'', function() {
display("<tt>live</tt> caught a click!");
});
// --- catcher1 events ---
// .click connects function with id=''catcher1''
$(''#catcher1'').click(function() {
display("Click Catcher1 caught a click and prevented <tt>live</tt> from seeing it.");
return false;
});
// --- catcher2 events ---
// .click connects function with id=''catcher2''
$(''#catcher2'').click(function() {
display("Click Catcher2 caught a click and prevented <tt>live</tt>, <tt>delegate</tt> and <tt>on</tt> from seeing it.");
return false;
});
// .delegate connects function with id=''catcher2''
$(document).delegate(''#catcher2'', ''click'', function() {
display("Delegate Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
return false;
});
// .on connects function with id=''catcher2''
$(document).on(''click'', ''#catcher2'', {}, function() {
display("On Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
return false;
});
// --- catcher3 events ---
// .delegate connects function with id=''catcher3''
$(document).delegate(''#catcher3'', ''click'', function() {
display("Delegate Catcher3 caught a click and <tt>live</tt> and <tt>on</tt> can see it.");
return false;
});
// .on connects function with id=''catcher3''
$(document).on(''click'', ''#catcher3'', {}, function() {
display("On Catcher3 caught a click and and <tt>live</tt> and <tt>delegate</tt> can see it.");
return false;
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
<!-- with JQuery 1.8.3 it still works, but .live was removed since 1.9.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<style>
span.frame {
line-height: 170%; border-style: groove;
}
</style>
<div>
<span class="frame">Click me</span>
<span class="frame">or me</span>
<span class="frame">or me</span>
<div>
<span class="frame">I''m two levels in</span>
<span class="frame">so am I</span>
</div>
<div id=''catcher1''>
<span class="frame">#1 - I''m two levels in AND my parent interferes with <tt>live</tt></span>
<span class="frame">me too</span>
</div>
<div id=''catcher2''>
<span class="frame">#2 - I''m two levels in AND my parent interferes with <tt>live</tt></span>
<span class="frame">me too</span>
</div>
<div id=''catcher3''>
<span class="frame">#3 - I''m two levels in AND my parent interferes with <tt>live</tt></span>
<span class="frame">me too</span>
</div>
</div>
Como ''en vivo'' manejará los eventos de los elementos futuros que coinciden con el selector actual, puede elegir hacer clic ya que no quiere que eso suceda; solo desea manejar los elementos seleccionados actualmente.
Además, sospecho (aunque no hay evidencia) que hay una leve eficiencia al usar ''clic'' sobre ''en vivo''.
Sotavento
Por lo que entiendo, la diferencia clave es que Live () mantiene abiertos los nuevos elementos DOM que coinciden con el selector en el que está trabajando, mientras que click () (o bind (''click'')) conecta el gancho de evento y finaliza.
Dado que gran parte de tu código se carga de forma asíncrona, el uso de live () hará que tu vida sea mucho más fácil. Si no sabes exactamente el código que estás cargando pero sabes qué tipo de elementos estarás escuchando, entonces usar esta función tiene mucho sentido.
En términos de ganancias de rendimiento, una alternativa al uso de live () sería implementar una función de devolución de llamada AJAX para volver a enlazar los ganchos de eventos.
var ajaxCallback = function(){
$(''*'').unbind(''click'');
$(''.something'').bind(''click'', someFunction);
$(''.somethingElse'').bind(''click'', someOtherFunction);
}
Tendrá que mantener un registro adecuado de los ganchos de su evento y asegurarse de que esta función vuelva a enlazar los eventos correctos.
ps Los métodos Ajax .get (), .post (), .load () y .ajax () le permiten especificar una función de devolución de llamada.
Puede haber momentos en los que explícitamente solo desee asignar el controlador de clics a objetos que ya existen y manejar nuevos objetos de forma diferente. Pero más comúnmente, vivir no siempre funciona. No funciona con declaraciones de jQuery encadenadas como:
$(this).children().live(''click'',doSomething);
Necesita un selector para funcionar correctamente debido a la forma en que los eventos aparecen en el árbol DOM.
Editar: Alguien acaba de subir la fecha, por lo que obviamente la gente sigue mirándolo. Debo señalar que live y bind están deprecated . Puede realizar ambos con .on() , que IMO es una sintaxis mucho más clara. Para reemplazar bind :
$(selector).on(''click'', function () {
...
});
y para reemplazar en live :
$(document).on(''click'', selector, function () {
...
});
En lugar de usar $(document) , puede usar cualquier objeto jQuery que contenga todos los elementos en los que está monitoreando los clics, pero el elemento correspondiente debe existir cuando lo llame.
Si necesita simplificar el código, en vivo es mejor en la mayoría de los casos. Si necesita obtener el mejor rendimiento, delegar siempre será mejor que vivir. bind (click) vs delegate no es una pregunta tan simple (si tienes muchos elementos similares, entonces delegate será mejor).
Siempre use click si no agrega elementos dinámicamente.
live works agregando un detector de eventos a la raíz del documento y escuchando los eventos borrados. Una alternativa es delegate , que funciona igual, pero vincula el manejador de eventos al elemento especificado.
De esta forma, el evento no debe hacer brotar todo el DOM y se detecta antes.
Todos los objetos que se asociarían con .click deben existir cuando configuras el evento.
Ejemplo: (en pseudocódigo) el apéndice puede ser $("body").append() por ejemplo
append(''<div id="foo" class="something">...</div>'');
$("div.something").click(function(){...});
append(''<div id="bar" class="something">...</div>'');
Haga clic en funciona para foo pero no funciona para la barra
Ejemplo2:
append(''<div id="foo" class="something">...</div>'');
$("div.something").live("click",function(){...});
append(''<div id="bar" class="something">...</div>'');
haga clic en funciona para foo y bar
Con .live (''clic'' ... puede agregar dinámicamente más objetos después de haber creado el evento y el evento de clic seguirá funcionando.
recuerde que el uso de "live" es para "jQuery 1.3" o superior
en la versión "jQuery 1.4.3" o superior se usa "delegado"
y la versión "jQuery 1.7 +" o superior se usa "on"
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+
A partir de jQuery 1.7, el método .live () está en desuso.
verificar deprecated
Saludos, Fernando