Javascript after AJAX load?

Question

I am using Infinite Scroll on my website: http://8wayrun.com/articles/soulcalibur-ii.22/category

As you scroll to the bottom, it will load the next page. As you scroll down though, you will see that one of the elements loaded in through the javascript contains a Twitter quote. Normally, Twitter quotes are automatically converted using Twitter's JS API into a Twitter element. However, because the page is being loaded through AJAX, its not activating the Twitter JS.

How do I fix this?

Answer 1

Execute the below JS after loading new content:-

twttr.widgets.load();

The above statement will scan the complete document for any embedded tweets. In case you have the element within which the content has been added then pass that element as argument in the load function.

Answer 2

A generic solution would be something like:

let newScripts = main.getElementsByTagName('script');
// DANGER we eval these
[...newScripts].forEach( script=> {
  if(script.innerHTML) {
    eval( script.innerHTML );
  } else if(script.src) {
    let scriptTag = document.createElement('script');
    scriptTag.src = script.src;
    document.body.appendChild(scriptTag);
  }
});