Explication détaillée de l'utilisation de .die() et .live() dans jQuery

De nombreux développeurs connaissent la méthode .live() de jQuery. La plupart d'entre eux savent ce que fait cette fonction , mais ils ne savent pas comment l'implémenter, ce n'est donc pas si confortable à utiliser. Et ils n'ont jamais entendu parler de la méthode .die() pour dissocier l'événement .live(). Même si cela vous est familier, connaissez-vous .die() ?

Qu'est-ce que .live()
La méthode .live est similaire à .bind(), sauf qu'elle vous permet de lier des événements à des éléments DOM. Vous pouvez Les événements sont liés. à des éléments qui n'existent pas encore dans le DOM Jetez un œil à l'exemple suivant :

Disons qu'un utilisateur clique sur un lien et que vous souhaitez être averti qu'il quitte le site.

$(
document
).ready( function() { 
$('a').click( function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

Notez que .click() n'est qu'une méthode simple pour implémenter le .bind() plus général. Le code ci-dessous et ci-dessus sont équivalents à l'implémentation ci-dessus.

$(document).ready( function() { 
$('a').bind( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

Mais maintenant, ajoutez un lien vers la page via javascript.

$(&#39;body&#39;).append(&#39;<p><a href="...">Check it out!</a></p>&#39;);

Cependant, lorsque l'utilisateur clique sur le lien, la méthode ne sera pas appelée, car le lien n'existe pas lorsque vous liez l'événement click à tous les nœuds 3499910bf9dac5ae3c52d5ede7383485 remplacez .bind() par .live() :

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
});

Désormais, si vous ajoutez un nouveau lien à la page, la liaison fonctionnera.

.live() Comment ça marche La magie derrière
.live() est qu'il ne lie pas l'événement aux éléments que vous avez sélectionnés, mais le lie en fait à l'arborescence DOM avec le nœud (. $(document) dans l'exemple), il est passé dans l'élément comme un paramètre.

Ensuite, lorsque vous cliquez sur un élément, l'événement click sera transmis dans l'arborescence DOM jusqu'à ce qu'il atteigne le nœud racine. Le déclencheur de cet événement .click() a été créé par .live() sur le nœud racine. Cette méthode de déclenchement vérifiera d'abord si la cible cliquée correspond au sélecteur appelé par .live(). Ainsi, dans l'exemple ci-dessus, il sera vérifié si l'élément cliqué correspond à $('a') dans $('a').live(). S'il correspond, la méthode de liaison sera exécutée.

Parce que peu importe ce sur quoi vous cliquez dans le nœud racine, l'événement .click() du nœud racine sera déclenché, et cette vérification se produira lorsque vous cliquerez sur n'importe quel élément ajouté au nœud racine.

Tous les .live() peuvent être .die()
Si vous connaissez .bind(), alors vous connaissez certainement .unbind(). Ensuite, .die() et .live() ont une relation similaire. Afin d'accéder à la liaison ci-dessus (ne pas vouloir que la boîte de dialogue apparaisse lorsque l'utilisateur clique sur le lien), nous procédons comme suit :

$('a').die();

Plus précisément, s'il existe d'autres événements liés et doivent être conservés, comme le survol ou autre, vous pouvez uniquement dissocier l'événement de clic.

$('a').die('click');

Pour être plus précis, si le nom de la méthode a été défini, vous pouvez dissocier la méthode spécifiée.

specialAlert = function() { 
alert("You are now leaving this site"); 
return true; 
} 
$(document).ready( function() { 
$('a').live( 'click', specialAlert ); 
$('a').live( 'click', someOtherFunction ); 
}); 
// then somewhere else, we could unbind only the first binding 
$('a').die( 'click', specialAlert );

Questions sur .die()
Lors de l'utilisation de ces fonctions, la méthode .die() présente un inconvénient. Vous ne pouvez utiliser que le sélecteur d'élément utilisé dans la méthode .live(). Par exemple, vous ne pouvez pas l'écrire comme ceci :

$(document).ready( function() { 
$('a').live( 'click', function() { 
alert("You are now leaving this site"); 
return true; 
}); 
}); 
// it would be nice if we could then choose specific elements 
// to unbind, but this will do nothing 
$('a.no-alert').die();

.die() se présente. comme Il semble que l'option cible corresponde et que la liaison de .live() soit publiée, mais en fait, $('a.no-alert') n'a pas de liaison, donc jquery ne trouve aucune liaison pour la supprimer, donc ça ne marchera plus.
Ceci est encore pire :

$(document).ready( function() { 
$('a,form').live( 'click', function() { 
alert("You are going to a different page"); 
return true; 
}); 
}); 
// NEITHER of these will work 
$('a').die(); 
$('form').die(); 
// ONLY this will work 
$('a,form').die();

Comment réparer .die()

Dans mon prochain article, je vais suggèrent une nouvelle façon d'implémenter .die() qui fournit un comportement rétrocompatible. Peut-être que si j'ai le temps, je suggérerai à l'équipe de développement principale de jQuery d'accepter mes suggestions et d'apporter des modifications dans la prochaine version. J'espère avoir davantage de méthodes que je viens d'écrire, y compris des paramètres de contexte facultatifs, permettant d'attacher des nœuds personnalisés. événements, et non le nœud racine.

Si vous souhaitez plus d'informations et d'exemples, vous pouvez consulter la documentation de jQuery .live() et .die()

Faites également attention à .delegate() et .undelegate(). , Ils peuvent remplacer .live() et .die(), et ils sont étroitement liés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!