Je suis curieux de connaître les différences entre les fonctions bind et live.
Pour moi, ils semblent être presque identiques.
Je lis les avantages des méthodes live/bind mais il ne m'a pas parlé des différences...
Gracias.
Réponses
Trop de publicités?
nickf
Points
185423
En bref : .bind() s'appliquera uniquement 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'à ceux que vous pourriez ajouter à l'avenir.
La différence fondamentale entre eux est que live() fait usage de bouillonnement d'événements . C'est-à-dire que lorsque vous cliquez sur un bouton, ce bouton peut exister dans une <p> dans un <div> dans un <body> donc, en fait, vous cliquez sur tous ces éléments en même temps.
live() fonctionne en attachant votre gestionnaire d'événement à l'objet document et non à la élément . Lorsque vous cliquez sur ce bouton, comme illustré précédemment, le document reçoit le même événement de clic. Il remonte alors la ligne des éléments ciblés par l'événement et vérifie si l'un d'entre eux correspond à votre requête.
Le résultat est double : tout d'abord, cela signifie que vous ne devez pas continuer à réappliquer les événements aux nouveaux éléments, puisqu'ils seront implicitement ajoutés lorsque l'événement se produira. Mais, plus important encore (en fonction de votre situation), cela signifie que votre code est beaucoup plus léger ! Si vous avez 50 <img> sur la page et vous exécutez ce code :
$('img').click(function() { /* doSomething */ });...alors cette fonction est copié 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'à un seul endroit (sur le document), et est appliquée à tout ce qui correspond à votre requête au moment de l'événement.
Cependant, en raison de ce comportement de bulle, tous les événements ne peuvent pas être traités de cette façon. Comme Ichiban l'a noté, les événements pris en charge sont les suivants : click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
.bind() attache des événements aux éléments qui existent ou qui correspondent au sélecteur au moment où l'appel est effectué. Tous les éléments créés par la suite ou qui correspondent à 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, cette fonction était limitée aux événements suivants : click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Rob Beardow
Points
751
Bind liera les événements au motif spécifié, pour toutes les correspondances dans le DOM actuel au moment où vous l'appelez. Live lie les événements au modèle spécifié pour le DOM actuel et pour les correspondances futures dans le DOM, même si celui-ci change.
Par exemple, si vous liez $("div").bind("hover", ...), cela s'appliquera à tous les "div" présents dans le DOM à ce moment-là. Si vous manipulez ensuite le DOM et ajoutez un "div" supplémentaire, cet événement de survol ne sera pas lié. En utilisant live au lieu de bind, l'événement sera également envoyé à la nouvelle "div".
Jeff Maes
Points
324
Bonne lecture sur ce sujet : http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
Il est aujourd'hui (depuis jQuery 1.7) déconseillé d'utiliser la fonction .on(). http://api.jquery.com/on/
Javier
Points
33134
Imaginez ce scénario :
- j'en ai plusieurs
<img>éléments. $('img').bind('click', function(){...});- ajouter quelques images supplémentaires (en utilisant
get()ouhtml(), n'importe quoi) - les nouvelles images n'ont pas de liaison !!
Bien sûr, puisque les nouvelles images n'existaient pas lorsque vous avez fait le transfert. $('img')... à l'étape 2, il n'a pas lié le gestionnaire d'événement à eux.
maintenant, si tu fais ça :
- j'en ai plusieurs
<img>éléments. $('img').live('click', function(){...});- ajouter quelques images supplémentaires (en utilisant
get()ouhtml(), n'importe quoi) - les nouvelles images faire avoir la liaison !
En fait, jQuery lie un gestionnaire d'événements générique à un autre élément situé plus haut dans l'arborescence du DOM (body ? document ? aucune idée) et laisse l'événement remonter. live() et si c'est le cas, ils sont déclenchés, peu importe que l'élément ait été créé avant ou après l'événement live() appeler.
