it-swarm.com.de

Was ist der Unterschied zwischen der Bind- und der Live-Methode in jQuery?

Ich bin gespannt auf die Unterschiede zwischen der Bind- und der Live-Funktion.

Für mich scheinen sie fast identisch zu sein.

Ich habe gelesen die Vorteile von Live/Bind-Methoden , aber es hat mir nichts über die Unterschiede gesagt ...

Vielen Dank!

65
Kevin Brown

.bind () hängt Ereignisse an Elemente an, die zum Zeitpunkt des Aufrufs vorhanden sind oder mit der Auswahl übereinstimmen. Alle später erstellten Elemente oder Elemente, die in Zukunft übereinstimmen, weil die Klasse geändert wurde, lösen das gebundene Ereignis nicht aus.

.live () funktioniert für vorhandene und zukünftige übereinstimmende Elemente. Vor jQuery 1.4 war dies auf die folgenden Ereignisse beschränkt: click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

77
ichiban

Kurz gesagt: .bind() gilt nur für die Elemente, die Sie aktuell in Ihrem jQuery-Objekt ausgewählt haben. .live() gilt für alle aktuellen übereinstimmenden Elemente sowie für alle Elemente, die Sie möglicherweise in Zukunft hinzufügen.

Der grundlegende Unterschied zwischen ihnen besteht darin, dass live()event bubbling verwendet. Wenn Sie auf eine Schaltfläche klicken, befindet sich diese Schaltfläche möglicherweise in einem <p> -, einem <div> - oder einem <body> - Element. Tatsächlich klicken Sie also auf alle diese Elemente gleichzeitig.

live() hängt Ihren Event-Handler an das Dokument und nicht an das Element. Wenn Sie auf diese Schaltfläche klicken, wie oben dargestellt, erhält das Dokument dasselbe Klickereignis. Anschließend wird die vom Ereignis angezielte Elementreihe erneut durchsucht und überprüft, ob eines der Elemente mit Ihrer Abfrage übereinstimmt.

Das Ergebnis ist zweierlei: Erstens bedeutet dies, dass Sie Ereignisse nicht erneut auf neue Elemente anwenden müssen, da sie implizit hinzugefügt werden, wenn das Ereignis eintritt. Wichtiger jedoch (abhängig von Ihrer Situation) ist, dass Ihr Code viel leichter ist! Wenn Sie 50 <img> - Tags auf der Seite haben und diesen Code ausführen:

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

... dann wird diese Funktion kopiert in jedes dieser Elemente. Wenn Sie jedoch diesen Code hatten:

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

... dann wird diese Funktion nur an einer Stelle (im Dokument) gespeichert und auf alle Elemente angewendet, die Ihrer Anfrage zur Ereigniszeit entsprechen.

Aufgrund dieses sprudelnden Verhaltens können jedoch nicht alle Ereignisse auf diese Weise behandelt werden. Wie Ichiban feststellte, handelt es sich bei diesen unterstützten Ereignissen um Klicken, Mausklick, Mouseup, MouseMove, Mouseover, Mouseout, Keydown, Tastendruck und Keyup.

90
nickf

Schön zu lesen: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Wird heutzutage (seit jQuery 1.7) mit der Funktion .on () nicht mehr unterstützt - http://api.jquery.com/on/

5
Jeff Maes

Bind bindet Ereignisse für alle Übereinstimmungen im aktuellen DOM zum Zeitpunkt des Aufrufs an das angegebene Muster. Live bindet Ereignisse an das angegebene Muster für das aktuelle DOM und an zukünftige Übereinstimmungen im DOM, auch wenn sich dies ändert.

Wenn Sie beispielsweise $ ("div"). Bind ("hover", ...) binden, gilt dies für alle "div" im DOM zu diesem Zeitpunkt. Wenn Sie dann das DOM manipulieren und ein zusätzliches "div" hinzufügen, wird dieses Hover-Ereignis nicht gebunden. Wenn Sie "live" anstelle von "bind" verwenden, wird das Ereignis auch an den neuen Div gesendet.

5
Rob Beardow

stellen Sie sich dieses Szenario vor:

  1. ich habe mehrere <img> Elemente.
    • $('img').bind('click', function(){...});
    • einige zusätzliche Bilder hinzufügen (mit get() oder html(), alles)
    • die neuen Bilder haben keine Bindung !!

da die neuen Bilder nicht vorhanden waren, als Sie in Schritt 2 die Funktion $('img')... ausgeführt haben, wurde der Ereignishandler nicht an sie gebunden.

jetzt, wenn du das tust:

  1. ich habe mehrere <img> Elemente.
    • $('img').live('click', function(){...});
    • einige zusätzliche Bilder hinzufügen (mit get() oder html(), alles)
    • die neuen Bilder tun haben die Bindung !!

magie? nur ein wenig. Tatsächlich bindet jQuery einen generischen Ereignishandler an ein anderes Element weiter oben in der DOM-Struktur (body? document? no idea) und lässt das Ereignis explodieren. Wenn der generische Handler aufgerufen wird, wird geprüft, ob er mit Ihren live() -Ereignissen übereinstimmt. In diesem Fall werden sie ausgelöst, unabhängig davon, ob das Element vor oder nach dem live() -Aufruf erstellt wurde .

4
Javier

Zusätzlich zu dem, was sie gesagt haben, ist es meines Erachtens am besten, sich an bind zu halten, wenn/wo Sie können, und live nur zu verwenden, wenn Sie müssen.

3
andi

Alle diese jQuery-Methoden werden zum Anhängen von Ereignissen an Selektoren oder Elemente verwendet. Aber sie sind alle verschieden voneinander.

. bind (): Dies ist die einfachste und schnellste Methode zum Binden von Ereignissen. Das Problem mit bind () ist jedoch, dass es nicht für dynamisch hinzugefügte Elemente funktioniert, die demselben Selektor entsprechen. bind () fügt nur Ereignisse an die aktuellen Elemente an, nicht an zukünftige Elemente. Darüber hinaus hat es auch Leistungsprobleme beim Umgang mit einer großen Auswahl.

. live (): Diese Methode überwindet den Nachteil von bind (). Es funktioniert für dynamisch hinzugefügte oder zukünftige Elemente. Aufgrund der schlechten Leistung auf großen Seiten ist diese Methode ab jQuery 1.7 veraltet und sollte nicht mehr verwendet werden. Verkettung wird mit dieser Methode nicht richtig unterstützt.

Erfahren Sie mehr hier

1
Rahul Kumar

Es gibt eine Möglichkeit, den Live-Effekt zu erzielen, aber es ist böse.

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

dadurch wird die vorherige gelöscht und die neue zurückgesetzt. Es schien im Laufe der Zeit gut für mich zu funktionieren.

0
David

Der Unterschied zwischen live und livequery ist hier besprochen .

0
Roger

Ich wollte das ergänzen, nachdem ich wegen meiner eigenen Albernheit ein bisschen debuggen musste. Ich habe .live () auf eine Klasse von Schaltflächen auf meiner Seite angewendet, vorausgesetzt, es wird nur die richtige ID ausgegeben, die ich versucht habe, die Abfragezeichenfolge weiterzuleiten, und ich habe getan, was ich mit dem Ajax-Aufruf tun wollte. Meine App verfügt über dynamisch hinzugefügte Schaltflächen, die einem Inventarelement zugeordnet sind. Führen Sie beispielsweise einen Drilldown der Kategorien auf die Schaltfläche "COKE" durch, um Ihrer Bestellung eine Cola hinzuzufügen. Führen Sie erneut einen Drilldown von oben durch und fügen Sie 'BUDLITE' hinzu - jedes Mal, wenn ich wollte, dass diese Elemente über einen AJAX) - Aufruf in eine Tabelle eingegeben werden.

Allerdings, da ich .live () an die gesamte Klasse von Knöpfen gebunden habe, würde es sich an jeden Ajax-Aufruf erinnern, den ich gemacht habe, und ihn für jeden nachfolgenden Knopf erneut abfeuern! Es war etwas knifflig, weil ich den Unterschied zwischen Binden und Leben nicht genau geklärt hatte (und die Antwort darüber ist kristallklar), also nahm ich an, ich würde das hier eintragen, nur für den Fall, dass jemand nach diesem Zeug sucht .

0
ChrisM