title: Load Javascript after AJAX-fetched HTML is fully loaded
body: <p>I have a situation where the HTML part is loaded with AJAX into a DIV with ID="dynamic content" using <strong>main.js</strong> script. This script is situated inside the HEAD part of <strong>main.php</strong> and it goes like this:</p>
  
  <pre><code>$.ajax({
              url: 'content.php',
              success: function(output){
  
                  $('#dynamic-content').html(output);
              }       
      });
  </code></pre>
  
  <p>The Javascript file responsible for controlling that content is situated in another JS file named <strong>secondary.js</strong>. This file is placed just before the closing of BODY again inside <strong>main.php</strong>.</p>
  
  <p>main.php Document Structure:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      ....
      &lt;div id="dynamic-content"&gt;&lt;/div&gt;
      ....
      ....
      &lt;script type="text/javascript" src="js/secondary.js"&gt;&lt;/script&gt; 
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sometimes the content of <strong>content.php</strong> is too large, and <strong>secondary.js</strong> file loads before the content is fully loaded. Hence some elements are not targeted and i have problems.</p>
  
  <p>Is there a way for me to delay for 1-2 seconds the execution of secondary.js, just to make sure that the content is fully loaded?</p>
  
  <p>ps: all above files are hosted on the same server</p>
  
  <p>Thanks in advance.</p>