Script doesn't run after load a div with ajax

Question

I have the script audiojs for changing the style of audios tag in html when I go to my page it work without problems, but when I click a button to reload div (this div contain audios tags) with function load jQuery the style of audiojs removed, I tried to get script after load the div with jQuery getScript, but the script load many times that caused to stop of my browser.

this is the function to call the audiojs

audiojs.events.ready(function() {
  audiojs.createAll();
});

I want a solution to call this function one time no more, thanks

Answer 1

Thanks everyone,

i found the solution,

after loading the div with ajax i added this code to remove the class audiojs

$("audio").removeClass("audiojs");

Answer 2

Try to adding a new script tag to with the script to re-load in your code something like below:

 <script language="text/javascript">
   function audiojs()
   {
      var div= document.getElementsByTagName('head')[0];
      var script= document.createElement('script');
      script.type= 'text/javascript';
      script.src= 'audiojs.js';
      div.appendChild(script);
   }
   audiojs();
</script>

I hope you will get some ideas now. Also check your caching.

Answer 3

It's hard to know without any link to the audio.js library, but most API's or libraries will give some indication that they are loaded. I would use an if statement to create something like:

(function () {
 function checkForLoaded(){
   if (audiojs.state !== null) { //or something similar
      audiojs.createAll();
   }
 }
})();