Introduction à l'utilisation de .live() et .die() de 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.

Le code est le suivant :

$(
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. et les codes ci-dessus sont une implémentation équivalente de ce qui précède.

Le code est le suivant :

$(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.

Le code est le suivant :

$('body').append('

Vérifiez-le !< /a>

');

Cependant, lorsque l'utilisateur clique sur ce lien, la méthode ne sera pas appelée, car ce lien lorsque vous liez l'événement de clic à all Le nœud n'existe pas encore, on remplace donc .bind() par .live() :

Le code est le suivant :

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

Maintenant si vous ajoutez un nouveau lien Une fois sur la page, la liaison peut être exécutée.

.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 :

Le code est le suivant :

$('a').die() ;

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

Le code est le suivant :

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

Soyez plus précis. été définie, vous pouvez dissocier la méthode spécifiée.

Le code est le suivant :

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 :

Le code est le suivant :

.

$(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();

< L'événement 🎜>

.die() semble correspondre à l'option cible et dissocier .live(), mais en fait, $('a.no-alert') n'a pas de liaison donc jquery. Je ne trouve aucune liaison à supprimer et cela ne fonctionnera pas.
Ce qui est pire, c'est le suivant :

Le code est le suivant :

$(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 suggérerai une nouvelle façon d'exécuter .die() qui peut fournir un comportement d'humeur 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!