title: $(document).ready not working in ajax page
body: <p>I'm loading my page contents dynamically with ajax and I want to load certain .js files with a function. The .js file loads fine, but only before the next page has been loaded via ajax.</p>
  
  <p>For example: from homepage to biography page:
  1st loads the .js file 
  2nd: loads the biography page (via ajax)</p>
  
  <p>It looks like that the ajax page is always on state document ready. So it wil trigger immediately the .js file, before it loads the content of the biography page via ajax.</p>
  
  <pre><code>$(document).ready(function() {
    $(".element").click(function() {
      jQuery.getScript("http://example.com/js/file.js");  
    });           
  });
  </code></pre>
  
  <p>I've manage to solve this problem temporary with a timeout, so that the .js file will load after 5 seconds, so after the page biography has been loaded.</p>
  
  <pre><code>$(".element").click(function() {
    setTimeout(function() {
      jQuery.getScript("http://example.com/js/file.js");
    }, 5000);
  });
  </code></pre>
  
  <p>How can I change the function so that it will load the .js file as soon as the biography page has been loaded (or any other page), instead of a timeout.</p>
  
  <p>EDIT1:</p>
  
  <p>I've added the ajax call here: 
  <a href="http://jsbin.com/ediFUca" rel="nofollow">http://jsbin.com/ediFUca</a></p>