Impossible d'ajouter HTML à un élément en JavaScript ou jQuery à l'intérieur d'une fonction

Question

J'essaie d'utiliser Barba pour implémenter des transitions de pages fluides. Voici mon code pour ajouter du HTML quand une nouvelle page est ajoutée. L'ajout fonctionne à partir de la console des outils de développement, mais à l'intérieur de cette fonction, il ne fonctionne pas. Toutefois, l'instruction console.log() fonctionne correctement sans aucun problème. J'ai aussi essayé une méthode purement JavaScript mais cela ne fonctionne pas non plus dans la fonction Barba.

document.getElementById("quick-share").innerHTML = "Share Now!"; 

Y at-il quelque chose qui me manque?

Merci.

Answer 1

En fait, avec Barba.js lorsque vous faites une transition, le nouveau contenu remplace l'ancien, qui est ce que nous pouvons voir dans leur How it works section:

5- Dès la nouvelle page est chargée, Barba. js analyse le nouveau HTML (en prenant .barba-container) et place le nouveau contenu sur le DOM dans # barba-wrapper.

6- L'instance de transition prendra soin de cacher l'ancien conteneur et montrera le nouveau.

7- Dès que la transition est terminée, l'ancien conteneur est retiré de le DOM.

Donc, votre problème est que lorsque vous appelez $("#quick-share"), en cas 'newPageReady', l'ancien contenu a été supprimé afin de ne pas retourner aucun élément à cet identifiant, c'est la raison pour laquelle vous ne pouvez pas voir le texte ci-joint.

Ce que vous pouvez faire est de recréer cet élément dans le nouveau conteneur, dans le gestionnaire d'événements transitionCompleted.