Snelle tip het verschil tussen Live () en Delegate ()

In jQuery 1.3 heeft het team de methode liv () geïntroduceerd, waarmee we gebeurtenishandlers kunnen koppelen aan elementen op de pagina, evenals alle elementen die in de toekomst dynamisch kunnen worden gemaakt. Hoewel niet perfect, bleek het zeker nuttig te zijn. Het meest in het bijzonder, live () borrelt helemaal naar boven en hecht de handler aan het document. Het houdt ook op goed te werken bij het ketenen van methodeaanroepen, helaas. Delegate () is geïntroduceerd in versie 1.4, wat bijna hetzelfde doet, maar dan efficiënter.

We onderzoeken de specifieke verschillen tussen de twee methoden in de snelle videotip van vandaag. Dankzij de FireQuery Firebug-extensie hebben we de tools om gemakkelijker te begrijpen hoe elke methode werkt.

Alternatieve kijkopties

Screenr (MP4)

   Klik hier

 // Bind koppelt een gebeurtenishandler alleen aan de elementen // die overeenkomen met een bepaalde selector. Dit sluit, naar verwachting, // alle dynamisch gegenereerde elementen uit. $ ("# items li"). klik (functie () $ (this) .parent (). append ("Nieuw element
");); // Live (), geïntroduceerd in 1.3, zorgt voor de binding // van gebeurtenishandlers aan alle elementen die overeenkomen met een //-kiezer, inclusief die gemaakt in de toekomst. // Het doet dit door het toevoegen van de handler van het document. // Helaas werkt het niet goed met ketenen. // Verwacht geen live () te classificeren na oproepen zoals // children (). next () ... etc. $ ("li"). live ("klik", functie () $ (this) .parent (). append ("Nieuw element
");); // Delegate, nieuw voor versie 1.4, had misschien een volledige // vervanging moeten zijn geweest voor Live (). Maar dat zou // uiteraard veel code gebroken hebben! Desalniettemin, // delegate remedies veel van de short-comings // gevonden in live (). Het voegt de gebeurtenishandler // direct toe aan de context, in plaats van aan het document. // Het heeft ook geen last van de kettingproblemen // die live wel. veel prestatievoordelen // om deze methode te gebruiken over live (). $ ('# items'). delegate ('li', 'click', function () $ (this) .parent (). append ('Nieuw element
'); ); // Door een DOM-element door te geven als de context van onze selector, kunnen we // Live () zich (bijna) op dezelfde manier gedragen als delegeren () // doet. Het koppelt de handler aan de context, niet // het document - wat de standaardcontext is. // De onderstaande code komt overeen met de gedelegeerde () versie // hierboven weergegeven. $ ("li", $ ("# items") [0]). live ("klik", functie () $ (this) .parent (). append ("Nieuw element
"););

Conclusie

Dit kan absoluut een verwarrend onderwerp zijn. Aarzel niet om vragen te stellen of te bespreken in de comments. Heel erg bedankt aan Elijah Manor voor het verduidelijken van een paar dingen voor mij over dit onderwerp!

Code