.live () vs .bind ()

Question

Je veux connaître la différence principale entre

.live() vs. .bind()

méthodes dans jQuery.

Answer 1

La principale différence est que, live travaillera également pour les éléments qui seront créés après que la page a été chargée (c'est à dire par votre code javascript), tandis que l' bind n'obligent les gestionnaires d'événements pour les objets existants.

// BIND example
$('div').bind('mouseover', doSomething);
// this new div WILL NOT HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

// LIVE example
$('div').live('mouseover', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Mise à jour:

jQuery 1.7 obsolète live() méthode et 1,9 a été retirée. Si vous souhaitez obtenir la même fonctionnalité avec 1,9+ vous devez utiliser une nouvelle méthode on() qui a une syntaxe légèrement différente car elle est appelée sur l'objet document et le sélecteur est passé en paramètre. A cet effet le code ci-dessus convertis à cette nouvelle façon de liaison des événements ressemblera à ceci:

// ON example
$(document).on('mouseover', 'div', doSomething);
// this new appended div WILL HAVE mouseover event handler registered
$('<div/>').appendTo('div:last');

Answer 2

J'ai fait une analyse statistique de l' .bind() vs .live() vs .delegate() à l'aide de FF profiler. J'ai fait 10 tours de chaque (pas un échantillon suffisant pour être définitive, mais illustre le point). Ce sont les résultats.

1) statique Unique élément avec un id à l'aide de l'événement click:

.bind():     Mean = 1.139ms, Variance = 0.1276ms
.live():     Mean = 1.344ms, Variance = 0.2403ms
.delegate(): Mean = 1.290ms, Variance = 0.4417ms

2) Plusieurs éléments statiques avec une classe commune à l'aide de l'événement click:

.bind():     Mean = 1.089ms, Variance = 0.1202ms
.live():     Mean = 1.559ms, Variance = 0.1777ms
.delegate(): Mean = 1.397ms, Variance = 0.3146ms

3) Plusieurs éléments dynamiques (premier bouton permet de seconde...) à l'aide de l'événement click:

.bind():     Mean = 2.4205ms, Variance = 0.7736ms
.live():     Mean = 2.3667ms, Variance = 0.7667ms
.delegate(): Mean = 2.1901ms, Variance = 0.2838ms

Interpréter la manière dont vous le souhaitez, mais il me semble que comme des éléments dynamiques augmentation sur une page .délégué() semble avoir les meilleures performances, tandis que les éléments statiques fonctionnent mieux avec .bind().

Gardez à l'esprit que je suis à l'aide d'une très simple, cliquez sur l'événement de déclenchement d'une alerte. Les différentes pages, avec des environnements différents (ie. PROCESSEUR, multi-onglet de navigation, les threads en cours d'exécution, etc) va afficher des résultats différents. J'ai utilisé cela comme un guide de base pour ma décision d'utiliser l'un ou l'autre. Veuillez indiquer si vous avez venir avec un résultat différent.

Merci!

Answer 3

Vous devriez envisager d'utiliser .delegate() au lieu de .live() où que possible. Depuis l'événement de la délégation pour l' .live() cible toujours le corps/document et vous êtes en mesure de limiter "bouillonnement" avec .delegate().

Voir http://api.jquery.com

Mise à JOUR

À partir de jQuery:

Comme de jQuery 1.7, .delegate() a été remplacé par l' .on() méthode. Pour les versions antérieures, toutefois, .delegate() reste le moyen le plus efficace pour l'utilisation de la délégation.

Answer 4

Comme de v1.7, de .live, .lier, et .délégué ont tous été remplacés par .on http://api.jquery.com/on/

J'étais curieux de la diffence moi-même, j'ai donc écrit un article avec des exemples de code. http://blog.tivix.com/2012/06/29/jquery-event-binding-methods/.

Sonne comme dépendant de la façon dont vous l'appelez .sur(), jquery va imiter .lier, .live, ou .délégué. Cela donne à vos gestionnaires d'événements plus d'élégance de la mise en œuvre.