title: Can't import javascript code with innerHTML
body: <p>I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.</p>
  
  <p>Main-page(index.php):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/java"&gt;
  ////bunch of functions////
  ////Ends up that page_request on this instance is 'graph.php'////
  document.getElementById('mydiv').innerHTML=page_request.responseText
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="mydiv"&gt;&lt;div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Child-page(loaded in div(graph.php)):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" /&gt;
  &lt;script src="other_stuff.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  ///bunch of script////
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:</p>
  
  <ul>
  <li>Put eval() around my code [I saw on a <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/eval" rel="nofollow">guide</a> that this could lead
  to malicious user attacks].</li>
  <li>Create the scripts on the main page then just import the data using:
  <ul>
  <li>document.createElement() and .parentNode.insertBefore()</li>
  </ul></li>
  <li>Create a listener and call the functions when I open graph.php</li>
  <li>And this good <a href="http://www.jsmadeeasy.com/javascripts/Advanced/innerHtml/innerHtml.htm" rel="nofollow">example</a></li>
  </ul>
  
  <p>Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.</p>