Quelle est la différence entre les méthodes bind et live dans jQuery?
Je suis curieux de connaître les différences entre les fonctions bind et live.
Ils me semblent presque identiques.
J'ai lu les avantages des méthodes live/bind , mais cela ne m'a pas parlé des différences ...
Merci!
.bind () attache des événements aux éléments qui existent ou correspondent au sélecteur au moment de l'appel. Tous les éléments créés ultérieurement ou cette correspondance à l'avenir parce que la classe a été modifiée, ne déclencheront pas l'événement lié.
.live () fonctionne pour les éléments correspondants existants et futurs. Avant jQuery 1.4, cela se limitait aux événements suivants: clic, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
En bref: .bind() ne s'appliquera qu'aux éléments que vous avez actuellement sélectionnés dans votre objet jQuery. .live() s'appliquera à tous les éléments correspondants actuels, ainsi qu'à tous ceux que vous pourriez ajouter à l'avenir.
La différence sous-jacente entre eux est que live() utilise bouillonnement d'événements . Autrement dit, lorsque vous cliquez sur un bouton, ce bouton peut exister dans un <p>, Dans un <div>, Dans un élément <body>; en fait, vous cliquez en fait sur tous ces éléments en même temps.
live() fonctionne en attachant votre gestionnaire d'événements au document , pas à l'élément . Lorsque vous cliquez sur ce bouton, comme illustré ci-dessus, le document reçoit le même événement de clic. Il recherche ensuite la ligne d'éléments ciblés par l'événement et vérifie si certains d'entre eux correspondent à votre requête.
Le résultat est double: premièrement, cela signifie que vous n'avez pas à continuer de réappliquer des événements à de nouveaux éléments, car ils seront implicitement ajoutés lorsque l'événement se produira. Cependant, plus important encore (selon votre situation), cela signifie que votre code est beaucoup plus léger! Si vous avez 50 balises <img> Sur la page et que vous exécutez ce code:
$('img').click(function() { /* doSomething */ });
... alors cette fonction est copiée dans chacun de ces éléments. Cependant, si vous aviez ce code:
$('img').live('click', function() { /* doSomething */ });
... alors cette fonction n'est stockée qu'en un seul endroit (sur le document) et est appliquée à tout ce qui correspond à votre requête au moment de l'événement.
En raison de ce comportement bouillonnant, tous les événements ne peuvent pas être traités de cette façon. Comme l'a noté Ichiban, ces événements pris en charge sont clic, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
Bonne lecture à ce sujet: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
Est aujourd'hui (depuis jQuery 1.7) obsolète à l'aide de la fonction .on () - http://api.jquery.com/on/
Bind liera les événements au modèle spécifié, pour toutes les correspondances dans le DOM actuel au moment où vous l'appelez. Live liera les événements au modèle spécifié pour le DOM actuel et aux futures correspondances dans le DOM, même s'il change.
Par exemple, si vous liez $ ("div"). Bind ("hover", ...) cela s'appliquera à tous les "div" du DOM à la fois. Si vous manipulez ensuite le DOM et ajoutez un "div" supplémentaire, cet événement de survol ne sera pas lié. L'utilisation de live au lieu de bind enverrait également l'événement au nouveau div.
imaginez ce scénario:
- j'ai plusieurs éléments
<img>.$('img').bind('click', function(){...});- ajouter des images supplémentaires (en utilisant
get(), ouhtml(), n'importe quoi) - les nouvelles images n'ont pas de reliure !!
bien sûr, puisque les nouvelles images n'existaient pas lorsque vous avez fait la $('img')... à l'étape 2, cela ne leur a pas lié le gestionnaire d'événements.
maintenant, si vous faites ceci:
- j'ai plusieurs éléments
<img>.$('img').live('click', function(){...});- ajouter des images supplémentaires (en utilisant
get(), ouhtml(), n'importe quoi) - les nouvelles images do ont la reliure !!
la magie? juste un peu. en fait, jQuery lie un gestionnaire d'événements générique à un autre élément plus haut dans l'arborescence DOM (corps? document? aucune idée) et laisse l'événement bouillonner. lorsqu'il arrive au gestionnaire générique, il vérifie s'il correspond à vos événements live() et si c'est le cas, ils sont déclenchés, que l'élément ait été créé avant ou après l'appel live() .
En plus de ce qu'ils ont dit, je pense qu'il est préférable d'essayer de s'en tenir à bind quand/où vous pouvez et d'utiliser live uniquement lorsque vous le devez.
Toutes ces méthodes jQuery sont utilisées pour attacher des événements à des sélecteurs ou à des éléments. Mais ils sont tous différents les uns des autres.
. bind (): C'est la méthode la plus simple et la plus rapide pour lier des événements. Mais le problème avec bind () est qu'il ne fonctionne pas pour les éléments ajoutés dynamiquement qui correspondent au même sélecteur. bind () attache uniquement des événements aux éléments actuels et non à l'élément futur. Au-dessus de cela, il a également des problèmes de performances lorsqu'il s'agit d'une large sélection.
. live (): Cette méthode surmonte l'inconvénient de bind (). Il fonctionne pour les éléments ajoutés dynamiquement ou les éléments futurs. En raison de ses performances médiocres sur les grandes pages, cette méthode est déconseillée à partir de jQuery 1.7 et vous devez cesser de l'utiliser. Le chaînage n'est pas correctement pris en charge à l'aide de cette méthode.
En savoir plus ici
Il y a un moyen d'obtenir l'effet live mais c'est un peu méchant.
$ (this) .unbind ('mouseout'). bind ('mouseout', function () {});
cela effacera le précédent et réinitialisera le nouveau. Cela a semblé bien fonctionner pour moi au fil du temps.
La différence entre live et livequery est discutée ici .
Je voulais ajouter à cela après avoir dû déboguer un peu à cause de ma propre bêtise. J'ai appliqué .live () à une classe de bouton sur ma page, en supposant qu'il restituerait juste l'ID correct que j'essayais de transmettre la chaîne de requête et faire ce que je voulais faire avec l'appel ajax. Mon application a ajouté dynamiquement des boutons associés à un élément d'inventaire. Par exemple, descendez les catégories jusqu'au bouton "COKE" pour ajouter un coke à votre commande. Explorez à nouveau du haut et ajoutez "BUDLITE" - chaque fois que je voulais que ces éléments soient entrés dans un tableau via un appel AJAX.
Cependant, puisque j'ai lié .live () à toute la classe de boutons, il se souviendrait de chaque appel ajax que j'avais fait et le re-tirerait pour chaque bouton suivant! C'était un peu délicat parce que je ne savais pas exactement la différence entre bind et live (et la réponse ci-dessus est cristalline à ce sujet), alors j'ai pensé que je mettrais cela ici juste au cas où quelqu'un ferait une recherche sur ce genre de choses .