Comment déclarer const et trouver un élément sur la page, qui a été rendu dynamiquement après l'extraction?
Disons que j'ai la navigation avec le premier élément codé en dur en html et le reste rendu dynamiquement après la récupération.
Si je le déclare au début du script:
const navItems = document.querySelectorAll('#nav li');
il ne trouve que le premier (codé en dur). Je comprends pourquoi cela se produit, mais je ne sais pas quoi faire. J'ai besoin de tous les navItems dans d'autres fonctions et cela ne fonctionne pas.
Si je le déclare dans le dernier then de la fonction fetch. Cela fonctionne, mais je ne suis pas sûr que ce soit une manière correcte. Cela n'a pas l'air «joli».
3 Réponses :
Vous pouvez émettre un événement personnalisé à la fin de votre extraction (dans la clause then ) ou vous pouvez utiliser un MutationObserver pour vérifier les changements dans le DOM dans un sous-arbre spécifique (votre nav, par exemple).
Si vous souhaitez affecter des gestionnaires d'événements à vos nouvelles LI, vous devez déléguer
document.querySelector('#nav').addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.tagName==="LI") {
console.log(tgt.textContent;
}
const navItems = tgt.querySelectorAll("li");
console.log(navItems.length)
})
qui fonctionnera quel que soit le moment où vous insérez les LI
Oui, mais ce code s'exécutera chaque fois que vous cliquerez sur un élément de navigation qui n'est pas vraiment idéal.
Cela dépend TRÈS DE CE QUE OP veut. S'il veut cliquer sur un nouveau LI, c'est le moyen de le faire
Il a précisé qu'il voulait sélectionner tous les éléments de navigation après une récupération, donc je pense qu'il serait préférable d'attendre la fin de cette récupération et de faire ce que vous avez à faire, au lieu d'avoir une logique qui se répète indéfiniment.
Il n'y a rien ici qui se répète indéfiniment. Pourquoi cette logique se répéterait-elle? C'est UN écouteur d'événement qui réagira à UN clic à la fois et ne répétera rien.
Un observateur de mutation fonctionne indéfiniment jusqu'à ce que vous l'arrêtiez. stackoverflow.com/questions/31659567/...
Le code à l'intérieur de l'écouteur d'événements sera déclenché à chaque fois qu'il y aura un événement de clic, nous pouvons être d'accord là-dessus. Si vous souhaitez vous désabonner de l'événement, vous avez besoin d'un moyen de savoir si les éléments dynamiques ont été créés, et vous pouvez donc tout aussi bien utiliser une méthode plus directe pour le faire, et déclencher votre code une seule fois et non à chaque fois. Cliquez sur.
Bien sûr, mais vous détectez la création des nouveaux éléments au moment où ils sont créés, faites votre truc et désabonnez-vous. C'est plus fiable.
Le code à l'intérieur de l'écouteur d'événements s'exécutera lorsqu'un clic se produira dans le conteneur de navigation. C'est TRÈS probablement ce dont nous avons besoin.
En aucun cas, OP ne spécifie que le comportement doit être redéclenché au clic, OP veut juste savoir quand les éléments dynamiques sont chargés afin de pouvoir les sélectionner. Nous pouvons être d'accord pour ne pas être d'accord haha
Nous n'avons aucune idée de pourquoi il veut les sélectionner. Peut-être souhaite-t-il les sélectionner pour pouvoir y ajouter l'auditeur d'événement encore et encore
Exactement, nous ne savons pas pourquoi, vous faites des hypothèses qui ne s'appliquent pas vraiment à ce qui a été demandé.
Vous pouvez accéder à cet élément que vous avez ajouté dynamiquement avec la délégation d'événements . À titre d'exemple, disons que vous souhaitez ajouter un écouteur d'événement à cet élément:
Tout d'abord, ajoutez-y un «exemple» de classe. Ensuite, func uniquement lorsqu'un élément avec cette classe est cliqué.
document.body.addEventListener('click', func);
const func = (e) => {
if (e.target.className === 'example') {
console.log('element accessed!'};
}
Ne pas dire que c'est la manière la plus élégante ou la plus jolie à faire, mais c'est certainement une option dans de tels cas.
Je suis content que ça l'ait fait!
C'est une bonne manière. Une autre façon est de le «convertir» en fonction
const navItems = () => document.querySelectorAll('#nav li');donc quand vous en avez besoin, au lieu denavItemsvous appeleznavItems().S'il vous plaît laissez-nous savoir POURQUOI et pour QUOI vous voulez les trouver tous. J'imaginais que vous devez cliquer sur les LI et affecter des gestionnaires d'événements. cette question est un peu comme un problème X / Y jusqu'à ce que vous nous fassiez savoir ce que vous aviez prévu avec la collection.