title: Javascript functions not working after changing html with innerHTML
body: <p>I have some html that uses a couple of JS functions inside a div. If I change the content of that div with the help of JS and innerHTML to some other html code that also has some JS functions, they stop to work. if I then change back to the previous html it still doesn't work. </p>
  
  <p>Its like the javascript is unbound to all the elements that had the function as soon as the html in a div is updated. </p>
  
  <p>I know I can solve this with hiding and showing layers but I would prefer not to do this. </p>
  
  <p>For the moment I have solved this by injecting the js file every time the html of that div is changed using this code:</p>
  
  <pre><code>function inject(src, cb, target){
      target = target || document.body;
      var s = document.createElement('SCRIPT');
      s.charset = 'UTF-8';
      if(typeof cb === 'function'){ 
          s.onload = function(){
              cb(s);
          }; 
          s.onreadystatechange = function () {
              (/loaded|complete/).test(s.readyState) &amp;&amp; cb(s);
           };                     
      }
      s.src = src;
      target.appendChild(s);
      return s;
  };
  </code></pre>
  
  <p>This how ever loads a new line in the html file every time I update the html which doesn't seem like a very elegant solution. </p>
  
  <p>Is there a way to make the javascript I have reload or keep its connections when I change the html without reloading the page?</p>