In jQuery 1.3 führte das Team die live () -Methode ein, mit der Event-Handler an Elemente auf der Seite gebunden werden können sowie alle, die in der Zukunft dynamisch erstellt werden könnten. Obwohl nicht perfekt, erwies es sich auf jeden Fall als hilfreich. Live () sprudelt vor allem nach oben und hängt den Handler an das Dokument an. Es funktioniert leider auch nicht mehr gut, wenn Methodenaufrufe verkettet werden. Delegate () wurde in Version 1.4 eingeführt, die fast dasselbe macht, aber effizienter.
Wir werden die spezifischen Unterschiede zwischen den beiden Methoden im heutigen Quick-Tipp für Videos untersuchen. Dank der FireQuery Firebug-Erweiterung verfügen wir über die Tools, um die Funktionsweise der einzelnen Methoden leichter zu verstehen.
Alternative Anzeigeoptionen
Screenr (MP4)
Klick mich
// Bind bindet einen Ereignishandler nur an die Elemente //, die einem bestimmten Selektor entsprechen. Dies schließt // erwartungsgemäß dynamisch erzeugte Elemente aus. $ ("# items li"). click (function () $ (this) .parent (). anhängen ("
Neues Element
");); // Live (), eingeführt in 1.3, ermöglicht die Bindung von // Eventhandlern an alle Elemente, die mit einem // Selektor übereinstimmen, einschließlich der in der Zukunft erstellten. // Dies geschieht durch Anhängen der Handler für das Dokument // Es funktioniert leider nicht gut mit der Verkettung. // Erwarten Sie nicht, live () nach Aufrufen wie // children (). next () ... etc. $ ("li") zu verketten. live ("click", function () $ (this) .parent (). append (")
Neues Element
");); // Delegate, neu in Version 1.4, sollte vielleicht // ein vollständiger Ersatz für Live () sein. Allerdings hätte das // natürlich eine Menge Code gebrochen. Trotzdem: // delegiert Abhilfemaßnahmen Die in live () gefundenen Short-Comings // verbinden den Event-Handler // direkt mit dem Kontext und nicht mit dem Dokument. // Außerdem leiden sie nicht an den Verkettungsproblemen //, die bei Live auftreten viele Leistungsvorteile // für die Verwendung dieser Methode über live (). $ ('# items'). delegate ('li', 'click', function () $ (this) .parent (). append ('
Neues Element
'); ); // Durch die Übergabe eines DOM-Elements als Kontext unseres Selektors können wir // Live () dazu bringen, sich (fast) genauso zu verhalten wie delegate () //. Es fügt den Handler an den Kontext an, nicht an das Dokument. Dies ist der Standardkontext. // Der folgende Code entspricht der Delegate () - Version //, die oben angezeigt wird. $ ("li", $ ("# items") [0]). live ("click", function () $ (this) .parent (). append ("
Neues Element
"););
Fazit
Dies kann definitiv ein verwirrendes Thema sein. Bitte zögern Sie nicht, Fragen zu stellen oder in den Kommentaren zu diskutieren. Vielen Dank an Elijah Manor, dass er mir ein paar Dinge zu diesem Thema erklärt hat!