Warum jQuery on () anstelle von click () verwenden?

Derzeit mit jQuery, wenn ich etwas tun muss, wenn ein Klick auftritt, werde ich es so machen ...

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

Ich habe mir einen Code angesehen, den jemand anderes in einem Projekt hat, und er macht das so ...

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

Beachten Sie, dass es, soweit ich das beurteilen kann, dasselbe zu tun scheint, außer dass sie die Funktion live () verwenden, die jetzt veraltet ist, und jQuery-Dokumente sagen, on()stattdessen zu verwenden, aber so oder so, warum live / on () anstelle meines ersten Beispiels verwenden?

Da Sie möglicherweise über dynamisch generierte Elemente verfügen (z. B. aus einem AJAX-Aufruf), möchten Sie möglicherweise denselben Klick-Handler haben, der zuvor an denselben Element-Selektor gebunden war. Anschließend "delegieren" Sie das Klick-Ereignis mithilfe des on()Selector-Arguments

Demonstrieren:

http://jsfiddle.net/AJRw3/

on()kann auch synonym sein, click()wenn Sie keinen Selektor angegeben haben:

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

ist gleichbedeutend mit

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

In dem Sinne, dass der Handler nur einmal zu allen Elementen mit Klasse hinzugefügt wird elementClass. Wenn Sie ein neues haben elementClasskommen, die zum Beispiel $('<div class="elementClass" />')wird der Handler nicht auf dieses neue Elemente gebunden sein, was Sie tun müssen:

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

Angenommen, es #containerist .elementClassder Vorfahr

Es gibt viele Antworten, von denen jede ein paar Punkte berührt - hoffentlich kann dies Ihnen Ihre Antwort geben, mit einer guten Erklärung, was was ist und wie man es verwendet.

Verwenden click()ist ein Alias ​​für bind('click' ...). Bei Verwendung bind()wird das DOM so verwendet, wie es ist, wenn der Ereignis-Listener eingerichtet wird, und die Funktion wird an jedes der übereinstimmenden Elemente im DOM gebunden. Das heißt, wenn Sie verwenden $('a').click(...), binden Sie die bereitgestellte Funktion an das Klickereignis jedes Ankertags im DOM, das bei der Ausführung dieses Codes gefunden wurde.

Verwenden live()war der alte Weg in jQuery; Es wurde verwendet, um Ereignisse genau wie dies zu bind()tun, aber es bindet sie nicht nur an Elemente im DOM, wenn der Code ausgeführt wird. Es lauscht auch auf Änderungen im DOM und bindet Ereignisse auch an zukünftige Elemente, die mit der Zukunft übereinstimmen. Dies ist nützlich, wenn Sie eine DOM-Manipulation durchführen und für einige Elemente ein Ereignis vorhanden sein muss, das möglicherweise später entfernt / aktualisiert / zum DOM hinzugefügt wird, aber beim ersten Laden des DOM nicht vorhanden ist.

Der Grund, der live()jetzt abgeschrieben wird, ist, dass es schlecht implementiert wurde. Um verwenden live()zu können, musste man zunächst mindestens ein Element im DOM auswählen können (glaube ich). Außerdem wurde eine Kopie der Funktion an jedes Element gebunden - und wenn Sie 1000 Elemente haben, sind das viele kopierte Funktionen.

Die Schaffung der on()Funktion bestand darin, diese Probleme zu überwinden. Sie können einen einzelnen Ereignis-Listener an ein Objekt binden, das sich im DOM nicht ändert (Sie können es also nicht on()für ein Element verwenden, das später entfernt / zum DOM hinzugefügt wird - binden Sie es an ein übergeordnetes Objekt) und einfach anwenden ein Element "filtern", so dass die Funktion nur ausgeführt wird, wenn sie zu einem Element hochgeblasen wird, das dem Selektor entspricht. Dies bedeutet, dass nur eine Funktion vorhanden ist (keine Kopien), die an ein einzelnes Element gebunden ist - ein viel besserer Ansatz zum Hinzufügen von "Live" -Ereignissen im DOM.

... und genau das sind die Unterschiede, warum jede Funktion existiert und warum sie live()abgeschrieben wird.

• $("a").live()-> Es gilt für alle <a>, auch wenn es nach dem Aufruf erstellt wird.
• $("a").click()-> Es gilt nur für alle, <a>bevor dies aufgerufen wird. (Dies ist eine Abkürzung von bind()und on()in 1.7)
• $("a").on()-> Bietet alle Funktionen, die zum Anhängen von Ereignishandlern erforderlich sind. (Neueste in jQuery 1.7)

Zitate :

Ab jQuery 1.7 ist die .live () -Methode veraltet. Verwenden Sie .on (), um Ereignishandler anzuhängen. Benutzer älterer Versionen von jQuery sollten .delegate () anstelle von .live () verwenden.
Diese Methode bietet die Möglichkeit, delegierte Ereignishandler an das Dokumentelement einer Seite anzuhängen, wodurch die Verwendung von Ereignishandlern beim dynamischen Hinzufügen von Inhalten zu einer Seite vereinfacht wird. Weitere Informationen finden Sie in der Diskussion zu direkten und delegierten Ereignissen in der .on () -Methode.

Die .on () -Methode hängt Ereignishandler an die aktuell ausgewählte Gruppe von Elementen im jQuery-Objekt an. Ab jQuery 1.7 bietet die .on () -Methode alle Funktionen, die zum Anhängen von Ereignishandlern erforderlich sind.

In früheren Versionen wird die Methode .bind () verwendet, um einen Ereignishandler direkt an Elemente anzuhängen.

click()ist eine Verknüpfung zur Nicht-Delegierungsmethode von on(). So:

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

Um Ereignisse mit zu delegieren on(), dh. In dynamisch erstellten Objekten können Sie Folgendes tun:

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

Führt jedoch on()die Delegierung in jedes statische Element ein, nicht nur documentwie live()folgt:

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

Sie sollten sich über den Unterschied zwischen liveund informierenbind .

Kurz gesagt, liveverwendet die Ereignisdelegierung, sodass Sie sich an Elemente binden können, die jetzt und in Zukunft vorhanden sind.

Im Gegensatz dazu hängen Handler, die über bind(und ähnliche Verknüpfungen click) angehängt sind , Handler direkt an die DOM-Elemente an, die dem Selektor entsprechen, und sind daher nur an Elemente gebunden, die jetzt vorhanden sind.

Eine Folge der liveFlexibilität ist eine verminderte Leistung. Verwenden Sie sie daher nur, wenn Sie die darin enthaltenen Funktionen benötigen.

$el.click(fn) ist eine Abkürzung für $el.on('click', fn)

Weitere Informationen finden Sie unter http://api.jquery.com/click/ und http://api.jquery.com/on/ .

Wenn Sie einige Ereignishandler an dynamically added elementsSie binden müssen, müssen Sie sie verwenden live(veraltet) oder dafür onsorgen, dass sie funktionieren. Funktioniert einfach $('element').click(...);nicht mit dynamisch hinzugefügten Elementen im DOM.

Weitere Informationen zum Unterschied zwischen .bind (), .live () und .delegate () von jQuery .

$ .click () ist lediglich eine Verknüpfung für bind oder on. Aus jQuery-Dokumenten:

In den ersten beiden Varianten ist diese Methode eine Verknüpfung für .bind ("click", Handler) sowie für .on ("click", Handler) ab jQuery 1.7. Wenn in der dritten Variante .click () ohne Argumente aufgerufen wird, ist dies eine Verknüpfung für .trigger ("click").

Die .on()Methode hängt Ereignishandler an die aktuell ausgewählte Gruppe von Elementen im jQuery-Objekt an. Die click()Methode bindet einen Ereignishandler an das JavaScript-Ereignis "click" oder löst dieses Ereignis für ein Element aus.

In der Ebene .click(...Wenn sich das Ziel des Selektors im laufenden Betrieb ändert (z. B. über eine Ajax-Antwort), müssen Sie das Verhalten erneut zuweisen.

Das .on(...ist sehr neu (jQuery 1.7) und kann das Live-Szenario mithilfe delegierter Ereignisse abdecken. Dies ist ohnehin eine schnellere Möglichkeit, Verhalten anzuhängen.

In der onMethode wird der Ereignishandler anstelle des Ziels an das übergeordnete Element angehängt.

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

Im obigen Beispiel ist der Click-Ereignishandler an das Dokument angehängt. Mithilfe von Ereignisblasen wird ermittelt, ob jemand auf das Zielelement geklickt hat.