title: Access DOM elements on HTML page loaded with AJAX
body: <p>Im currently struggling with an AJAX related problem on a website.<br />
  The goal is as follows:<br />
  There is a "simple" HTML page containing some links and content.<br /></p>
  
  <p>If you click on a link I want to open the file that gets includes with the link (from href) within a new div overlayed to the page. The content from the page is of course loaded with AJAX into the new div (the overlayed one).</p>
  
  <p>Within this new overlayed div I want to add some JS code which in general already works.<br />
  The problem anyway is that the DOM elements within the page loaded per AJAX cannot be accessed in a way that is comfortable to work with, in my specific case.
  I got following piece of code so far:</p>
  
  <pre><code>$$('.add-exercise').addEvent('click', function(e) {
          var request_exercise_add = new Request.HTML({
              'method' : 'post',
              'url' : e.target.get('href'),
  
              onSuccess : function(responseTree, responseElements, responseHTML, responseJavaScript) {
              // i know i can access responseElements here..
              }
          });
  
          request_exercise_add.send('s=true');
  
          return false;
      });
  </code></pre>
  
  <p>I know I can access the elements returned within responseElements but the logic on the included website is somehow quite complex and therefore it should be 
  possible to add the JS within the HTML code in the dynamically loaded page. 
  Notice that the JS also cannot be added to the <code>head</code> section because it would not know the elements that are loaded after the dom-ready event.</p>