2010-11-17 11 views
50

Ich benutze jQuery in meiner Webanwendung. Während ich seine Dokumentation lese, lese ich über live() und delegate(). Obwohl sie beide Methoden erklärt haben, verstehe ich nicht den genauen Unterschied zwischen ihnen. Auch nicht sicher, welche Methode in welchem ​​Szenario ideal ist.jQuery: live() vs Delegat()

Bitte helfen Sie mir, diese Methoden zu verstehen.

Dank

+1

Zusätzlich zu der Antwort unten, Leser könnte einen Blick auf diese * unglaublich gut * [Artikel] (http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/) erklärt den Unterschied zwischen 'bind',' live' und 'delegate'. – Jon

+0

Eine kurze Zusammenfassung: [JQuery - Live vs Delegat] (http://www.timacheson.com/Blog/2011/oct/jquery_live_vs_delegate). – Tim

Antwort

56

.live() erfordert, dass Sie den Wähler sofort ausgeführt, es sei denn, das Ergebnis ist es sehr verschwenderisch verwenden. Der Event-Handler ist hier an document angehängt, so dass alle Event dieses Typs von irgendwelchen sprudelnden Elementen überprüft werden müssen. Hier ist ein Anwendungsbeispiel:

$(".myClass").live("click", function() { alert("Hi"); }); 

Beachten Sie, dass die Aussage $(".myClass") lief, daß der Wähler alle Elemente mit dieser Klasse finden obwohl wir nicht über sie kümmern, alles, was wir wollte war die Zeichenfolge ".myClass" übereinstimmen später wenn click Ereignisse Blase bis zu document.


.delegate() tatsächlich nutzt .live() intern, aber mit einem Kontext. Der Selektor ist nicht sofort ausgeführt werden, so dass es bereits effizienter ist, und es nicht an document anhängen (obwohl es kann) es ist viel mehr lokal ... und all diese andere Ereignisse von anderen Elementbäumen Sie nicht Umsorgt wird nie wieder, wenn geblubbert ... wieder effizienter. Hier ist ein Anwendungsbeispiel:

$("#myTable").delegate("td", "click", function() { alert("Hi"); }); 

Nun, was ist hier passiert? Wir $("#myTable") liefen das Element zu erhalten, (zugegebenermaßen teurer als document zu befestigen, aber wir sind das Ergebnis mit. Dann legen wir einen Event-Handler an den (oder in anderen Fällen) Elemente. Nur clicks von innerhalb das Element gegen die "td" Wähler überprüft, wenn sie passieren, nicht von überall wie .live() ist (seit alles innen document ist).

+0

Tolle Erklärung, das Leben roch immer lustig für mich. Es ist viel besser, Ihre Handler nur auf den Teil zu beschränken, der Ihnen wichtig ist. –

+0

Sehen Sie einige Leistungsbenchmarks http://stackoverflow.com/questions/2690370/live-vs-bind/7692651#7692651 –

6

Delegierte() Karten Live() in der jQuery-Code. Der Hauptunterschied besteht darin, dass live() für ein Element aufgerufen wird, für das Sie die Ereignisse an ein anderes Element delegieren möchten. live() delegiert diese Ereignisse an das Dokument Objekt.

Delegate(), auf der anderen Seite können Sie festlegen, an welches Element Ereignisse delegiert werden, indem Sie einen Selektor übergeben. Ereignisse, die zu diesem Element übergehen, werden behandelt, wenn das ursprüngliche Element mit dem Selektor übereinstimmt.

Als @NickCraver mentioned, Delegierten() eine bessere Leistung als lebt, weil es nicht unbedingt Ereignisse erfassen von jedem Elemente auf der Seite, und es die Wähler nicht sofort abfragen.

3

Von jQuery Dokumentation:

Ab jQuery 1.7, die .live() Methode ist veraltet. Verwenden Sie .on(), um Ereignishandler anzuhängen. Benutzer älterer Versionen von jQuery sollten .delegate() anstelle von .live() verwenden.

http://api.jquery.com/live/

0

Live-Methode:

$("#mymethod").live("click", function() { alert("It checks the entire DOM"); }); 

Live-Methode überprüft, in Entire DOM #mymethod

Delegate-Methode (Manchmal wird es Zeit, basierend auf dem DOM Inhalt übernehmen):

$('.mycontainer').delegate('#mymethod','click',function() { alert('Checks only in mycontainer portion') }); 

Delagate durchsucht nicht Ihr gesamtes DOM, sondern sucht nur in Ihrem Mycontainer-Teil. (Verbessern Sie die Leistung)