title: Jquery .load() - How to execute Javascript in original document from loaded content
body: <p>I have a document that loads some content into a div with JQuery's .load() function. That loaded content then tries to execute Javascript from the original document. This fails, possibly for obvious reasons (I am a Javascript novice). Here is simplified code that illustrates my problem.</p>
  
  <p>test.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
      div {
          background: #ccc;
          margin: 15px;
          height: 500px;
          width: 500px;
          border: 1px solid #666;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="#" class="loader"&gt;Load content into box below&lt;/a&gt;
      &lt;div id="loadbox"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt; 
  
          jQuery(document).ready(function() { 
  
              $('a.loader').click(function() {
                  $('#loadbox').load('loadme.html');
              });
  
              $('a.alerter').click(function() {
                  alert("I've been clicked!");
              });
  
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>loadme.html:</p>
  
  <pre><code>&lt;a href="#" class="alerter"&gt;Click me&lt;/a&gt; for an alert.
  </code></pre>
  
  <p>The alert is triggered if I put the Javascript in the loaded content, but I have a large block of Javascript that I want to use with more than one div full of loaded content and I don't want to keep loading the Javascript. Is there a way to access the Javascript in the original HTML from the loaded content? I don't have a firm understanding of what order things are executed in, especially when I have loaded content into the page. Maybe this is my opportunity to learn! Thank you.</p>