Live ne peut pas être utilisé dans jquery

Ces dernières années, le domaine du développement front-end s'est développé rapidement, et des frameworks et des bibliothèques ont émergé les uns après les autres, parmi elles, jQuery est toujours l'une des bibliothèques JS les plus représentatives et les plus influentes. Cependant, même si jQuery est devenu un outil indispensable dans le monde du développement, il existe encore certaines situations où nous rencontrons des difficultés, comme par exemple la fonction live() de jQuery qui ne fonctionne pas. Cet article explorera pourquoi la fonction live() dans jQuery ne peut pas être utilisée et proposera des solutions.

1. Le rôle de live()

Avant jQuery 1.3, nous ne pouvions faire fonctionner les éléments DOM qu'en liant des événements, qui seraient sur chaque élément à opérer. est lié une fois. S'il y a trop d'éléments, cela réduira considérablement les performances. La version 1.3 de jQuery a introduit la fonction live(), qui peut lier des événements à tous les éléments correspondant au sélecteur. Les événements peuvent également être automatiquement déclenchés lorsque des éléments nouvellement ajoutés correspondent à ce sélecteur, résolvant ainsi le problème des opérations à grande échelle sur les performances des éléments. problèmes.

2. Défauts de live()

La fonction live() est effectivement très puissante, mais elle présente aussi quelques défauts qui la rendent inutilisable. Lorsque nous essayons d'utiliser la fonction live() dans jQuery 1.9 et les versions ultérieures, nous constatons qu'elle a été supprimée. La dernière version de jQuery n'a plus la fonction live(). En effet, l'implémentation de la fonction live() n'est pas assez élégante. Elle utilise des techniques spéciales pour simuler les effets du bouillonnement d'événements et des événements proxy, ce qui la provoque en conflit avec d'autres fonctions jQuery.

De plus, en plus de jQuery annonçant techniquement que live() n'est plus supporté, à partir de HTML5, la nouvelle méthode on() a été introduite pour remplacer bind(), live(), délégué () et d'autres méthodes, ce qui signifie que dans le développement Web moderne, utiliser live() n'a plus beaucoup de sens.

3. Solution

1. Utiliser la fonction délégué()

delegate() la fonction est une fonction fournie par jQuery Une méthode alternative pour déléguer la gestion des événements à un élément parent. Utilisez le sélecteur pour spécifier l'élément auquel l'événement est lié et liez l'événement à son élément ancêtre. De cette façon, lorsque jQuery exécute l'événement, il vérifiera si l'élément ancêtre de l'élément actuellement sélectionné correspond au sélecteur If. si cela correspond, la fonction sera exécutée. Cette méthode ne rencontre aucun problème lorsque des événements sont ajoutés dynamiquement et elle est jouée en boucle, similaire à live().

L'utilisation est la suivante :

$(selector).delegate(childSelector,event,data,function)

selector : utilisé pour le délégué traitement de l'élément parent.
childSelector : L'élément enfant qui doit être traité.
event : type d'événement, tel que clic.
data : Données transmises au gestionnaire d'événements.
function : Fonction de rappel exécutée lorsque l'événement est déclenché.

L'exemple de code est le suivant :

$(function(){

$("body").delegate(".btn", "click", function(){
    console.log("click btn!");
})

})

#🎜 🎜#Utiliser la fonction on()

on() La fonction est une fonction de traitement d'événements fournie depuis la version 1.9 de jQuery. L'événement lié peut non seulement écouter les événements DOM, mais également écouter. événements personnalisés. jQuery recommande d'utiliser on() au lieu des fonctions précédentes bind(), live() et délégué(), et on() est la méthode recommandée, qui peut réaliser presque toutes les fonctions de la fonction live().

L'utilisation est la suivante :

$(selector).on(event,childSelector,data,function)

selector : L'événement à être un élément lié.

event : type d'événement, tel que clic.
childSelector : Sélecteur d'éléments enfants, utilisé pour lier automatiquement des événements lors du chargement dynamique d'éléments enfants.
data : Les données transmises au gestionnaire d'événements peuvent être vides.
function : Fonction de rappel exécutée lorsqu'elle est déclenchée.

L'exemple de code est le suivant :

$(function(){

$("body").on("click", ".btn", function(){
    console.log("click btn!");
})

})

IV. Résumé#🎜 🎜#

Grâce à l'introduction et à l'exemple de code de cet article, nous pouvons voir que bien que la fonction live() ne puisse pas être utilisée, nous pouvons utiliser les fonctions délégué() et on() pour obtenir le même effet et continuez à utiliser jQuery. Dans le développement Web moderne, avec l'évolution continue des navigateurs et des technologies liées au front-end, nous devons essayer d'éviter d'utiliser des méthodes et des fonctions obsolètes et d'utiliser autant que possible les technologies et méthodes les plus récentes pour améliorer l'efficacité du développement et la qualité du code.

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!