addthis script not working after initial load

Question

In my component i am inserting the script i need to enable the addthis buttons to share content. I am inserting the script after the page has been created. But i noticed that when i navigate to another page that also has a set of share buttons that use the addthis script that the buttons don't work. Unless i do a hard reload then the buttons work but the same issue exists if i go to another page.

This is my script:

mounted() {
   let addscript = document.createElement('script');
   addscript.setAttribute(
     'src',
     '//s7.addthis.com/js/300/addthis_widget.js#pubid=#'
   );
   document.head!.appendChild(addscript);
 }

This is my pug/html:

.addthis_toolbox.addthis_default_style.addthis_32x32_style.d-none.d-md-block
                  h6 SHARE
                  a.addthis_button_linkedin
                      i.icon.ion-social-linkedin
                  a.addthis_button_facebook.mx-auto
                      i.icon.ion-social-facebook
                  a.addthis_button_twitter
                      i.icon.ion-social-twitter
                  a.addthis_button_email
                      i.icon.ion-email

I have these two sets of codes in three different components.

What would be the cause that the buttons not working after initial load when navigating to another page with the same code?

Answer 1

If you are using vuejs or any nodejs framework then when you navigating to a new page, your webapp doesn't reload page, i mean your code is not called when navigating to new page. So you should call your function again when you navigation a new page.

or use this:

window.addEventListener('popstate', function(e){
   let addscript = document.createElement('script');
   addscript.setAttribute(
     'src',
     '//s7.addthis.com/js/300/addthis_widget.js#pubid=#'
   );
   document.head!.appendChild(addscript);
});