Petite astuce La différence entre Live () et Delegate ()

Dans jQuery 1.3, l’équipe a introduit la méthode live (), qui nous permet de lier les gestionnaires d’événements aux éléments de la page, ainsi qu’à ceux qui pourraient être créés de manière dynamique à l’avenir. Bien que n'étant pas parfait, cela s'est avéré être utile. En particulier, live () bouillonne complètement et attache le gestionnaire au document. Il cesse également de bien fonctionner lors du chaînage d'appels de méthode, malheureusement. Delegate () a été introduit dans la version 1.4, qui fait presque la même chose, mais plus efficacement.

Nous examinerons les différences spécifiques entre les deux méthodes dans le conseil rapide vidéo d'aujourd'hui. Grâce à l'extension FireQuery Firebug, nous aurons les outils pour comprendre plus facilement le fonctionnement de chaque méthode..

Options de visualisation alternatives

Screenr (MP4)

   Cliquez moi

 // Bind attache un gestionnaire d'événements uniquement aux éléments // correspondant à un sélecteur particulier. Ceci, comme prévu, // exclut tous les éléments générés dynamiquement. $ ("# items li"). click (function () $ (this) .parent (). append ("Nouvel élément
");); // Live (), introduit dans la version 1.3, permet de lier // des gestionnaires d’événements à tous les éléments qui correspondent à un // sélecteur, y compris ceux créés à l’avenir. // // gestionnaire du document. // Malheureusement, cela ne fonctionne pas bien avec l'enchaînement. // Ne vous attendez pas à enchaîner live () après des appels tels que // children (). next ()… etc. $ ("li"). live ("click", function () $ (this) .parent (). append ("Nouvel élément
");); // // Délégué, une nouveauté de la version 1.4, aurait peut-être dû // être un remplacement complet de Live (). Cependant, cela // aurait évidemment cassé beaucoup de code! Néanmoins, // délègue de nombreux remèdes // se trouve dans live (). Il attache le gestionnaire d’événements // directement au contexte, plutôt qu’au document. // Il ne souffre pas non plus des problèmes de chaînage // qui survient en direct. de nombreux avantages en termes de performances // lors de l'utilisation de cette méthode par rapport à live (). $ ('# items'). delegate ('li', 'click', function () $ (this) .parent (). append ('Nouvel élément
'); ); // En passant un élément DOM comme contexte de notre sélecteur, nous pouvons faire en sorte que // Live () se comporte (presque) de la même manière que delegate () //. Il attache le gestionnaire au contexte, pas // au document - qui est le contexte par défaut. // Le code ci-dessous est équivalent à la version de delegate () // affichée ci-dessus. $ ("li", $ ("# éléments") [0]). live ("cliquez", fonction () $ (this) .parent (). append ("Nouvel élément
"););

Conclusion

Cela peut certainement être un sujet déroutant. S'il vous plaît n'hésitez pas à poser des questions, ou discuter dans les commentaires. Merci beaucoup à Elijah Manor pour avoir clarifié quelques points pour moi sur ce sujet!

Code