Diferencia entre .on ('clic') vs .click ()
Respuestas:
Creo que la diferencia está en los patrones de uso.
Preferiría .onhacerlo .clickporque el primero puede usar menos memoria y trabajar para elementos agregados dinámicamente.
Considere el siguiente html:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>donde agregamos nuevos botones a través de
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});y quiero "¡Alerta!" para mostrar una alerta. Podemos usar "clic" o "encendido" para eso.
Cuando usamos click
$("button.alert").click(function() {
alert(1);
});con lo anterior, se crea un controlador separado para cada elemento que coincida con el selector. Eso significa
- muchos elementos coincidentes crearían muchos controladores idénticos y, por lo tanto, aumentarían la huella de memoria
- los elementos agregados dinámicamente no tendrán el controlador, es decir, en el html anterior, la nueva "¡Alerta!" los botones no funcionarán a menos que vuelva a vincular el controlador.
Cuando usamos .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});con lo anterior, un único controlador para todos los elementos que coinciden con su selector, incluidos los creados dinámicamente.
... otra razón para usar .on
Como Adrien comentó a continuación, otra razón para usar .ones eventos con espacios de nombres.
Si agrega un controlador .on("click", handler)normalmente lo elimina con el .off("click", handler)cual eliminará ese mismo controlador. Obviamente, esto funciona solo si tiene una referencia a la función, entonces, ¿qué sucede si no la tiene? Utiliza espacios de nombres:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });con desvinculación a través de
$("#element").off("click.someNamespace");on('click' ...), consulte stackoverflow.com/a/3973060/759452, es decir. on('click.darkenallothersections' ...)y al mismo tiempo tengo on('click.displaynextstep' ...), entonces puedo desatar solo el que elijo usar.unbind('click.displaynextstep')
on()es la tendencia en jQuery. Tuve que actualizar $(window).load(function() {});a $(window).on("load", function (e) {})cuando actualicé a jQuery 3.
¿Hay alguna diferencia entre el siguiente código?
No, no hay diferencia funcional entre los dos ejemplos de código en su pregunta. .click(fn)es un "método de acceso directo" para .on("click", fn). De la documentación para.on() :
Existen métodos abreviados para algunos eventos, como los
.click()que se pueden usar para adjuntar o activar controladores de eventos. Para obtener una lista completa de métodos abreviados, consulte la categoría de eventos .
Tenga en cuenta que .on()difiere de .click()que tiene la capacidad de crear controladores de eventos delegados al pasar un selectorparámetro, mientras .click()que no. Cuando .on()se llama sin un selectorparámetro, se comporta exactamente igual que .click(). Si desea delegar eventos, use .on().
selectorparámetro. Si llama .on()sin un selectorparámetro, no hay mejora en el rendimiento sobre el uso .click().
.on()es la forma recomendada de hacer todo su enlace de eventos a partir de jQuery 1.7. Enrolla toda la funcionalidad de ambos .bind()y .live()en una sola función que altera el comportamiento a medida que le pasa diferentes parámetros.
Como ha escrito su ejemplo, no hay diferencia entre los dos. Ambos vinculan un controlador al clickevento de #whatever. on()ofrece flexibilidad adicional para permitirle delegar eventos disparados por hijos de #whatevera una sola función de controlador, si lo desea.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()hace? Además, esto parece contradecirse con las otras respuestas que dicen que solo tiene la funcionalidad de .click()y, por lo tanto, no se aplica a eventos futuros.
.on()puede hacer lo que .click()hace y hacer qué .bind()y .live()hacer, depende de los parámetros con los que lo llame. (Algunas otras respuestas también mencionaron esto). Tenga en cuenta que "Vincular a todos los enlaces dentro de #whatever" no es lo que .live()hace, es lo que .delegate()hace. .live()se une a todo el interior en documentlugar de permitirle especificar el contenedor. Note también .live()está en desuso desde jQuery 1.7 en adelante.
Como se menciona en las otras respuestas:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })Sin embargo, teniendo en cuenta que .on()admite varias otras combinaciones de parámetros que .click()no, lo que le permite manejar la delegación de eventos (supercediendo .delegate()y .live()).
(Y, obviamente, hay otros métodos de acceso directo similares para "keyup", "focus", etc.)
La razón por la que publico una respuesta adicional es para mencionar lo que sucede si llama .click()sin parámetros:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");Teniendo en cuenta que si lo usa .trigger()directamente, también puede pasar parámetros adicionales o un objeto de evento jQuery, con el que no puede hacerlo .click().
También quería mencionar que si observa el código fuente de jQuery (en jquery-1.7.1.js) verá que internamente la función .click()(o .keyup(), etc.) realmente llamará a .on()o .trigger(). Obviamente, esto significa que puede estar seguro de que realmente tienen el mismo resultado, pero también significa que el uso .click()tiene un poco más de sobrecarga: no hay nada de qué preocuparse o incluso pensar en la mayoría de las circunstancias, pero en teoría podría importar en circunstancias extraordinarias.
EDITAR: Finalmente, tenga en cuenta que le .on()permite vincular varios eventos a la misma función en una línea, por ejemplo:
$("#whatever").on("click keypress focus", function(){});.click().)
Parecen ser lo mismo ... Documentación de la función click () :
Este método es un acceso directo para .bind ('clic', controlador)
Documentación de la función on () :
A partir de jQuery 1.7, el método .on () proporciona toda la funcionalidad necesaria para adjuntar controladores de eventos. Para obtener ayuda en la conversión de métodos de eventos jQuery anteriores, consulte .bind (), .delegate () y .live (). Para eliminar eventos vinculados con .on (), vea .off ().
.clickvs.on
.click Los eventos solo funcionan cuando el elemento se procesa y solo se adjuntan a los elementos cargados cuando el DOM está listo.
.on los eventos se adjuntan dinámicamente a elementos DOM, lo que es útil cuando desea adjuntar un evento a elementos DOM que se representan en una solicitud ajax o algo más (después de que el DOM esté listo).
Aquí obtendrá una lista de las diferentes formas de aplicar el evento click. Puede seleccionar en consecuencia como suaitable o si su clic no funciona, pruebe con una alternativa.
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})En cuanto a ilearned de internet y algunos amigos .on () se usa cuando agrega elementos dinámicamente. Pero cuando lo usé en una página de inicio de sesión simple donde el evento click debería enviar AJAX a node.js y al regresar agregar nuevos elementos, comenzó a llamar a llamadas multi-AJAX. Cuando lo cambié para hacer clic () todo salió bien. En realidad no me he enfrentado a este problema antes.
NUEVOS ELEMENTOS
Como anexo a las respuestas completas anteriores para resaltar puntos críticos si desea que el clic se adjunte a nuevos elementos:
- los elementos seleccionados por el primer selector, por ejemplo, $ ("cuerpo") deben existir en el momento en que se realiza la declaración; de lo contrario, no hay nada a lo que apegarse.
- debe usar los tres argumentos en la función .on (), incluido el selector válido para sus elementos de destino como segundo argumento.
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- es más efectivo que $ ('. ACTUALIZACIÓN'). click (function () {});
- puede usar menos memoria y trabajar para elementos agregados dinámicamente.
- en algún momento, los datos recuperados dinámicos con el botón editar y eliminar no generan el evento JQuery al momento de EDITAR O BORRAR DATOS de los datos de fila en forma, ese tiempo
$(document).on('click','.UPDATE',function(){ });funciona efectivamente como los mismos datos recuperados utilizando jquery. el botón no funciona en el momento de la actualización o eliminación:
