title: Access DOM elements after ajax.load
body: <p>I am inserting the HTML response from an AJAX call into my page, but then when I try to access those elements after they have been created, it fails..</p>
  
  <p>This is how i retrieve and insert the HTML:</p>
  
  <pre><code>$.ajax({url: 'output.aspx',
     data: 'id=5', 
     type: 'get', 
     datatype: 'html',
     success: function(outData) {$('#my_container').html(outData);} 
  })
  </code></pre>
  
  <p>The outcome HTML, which is inserted into the <code>&lt;div&gt;</code> (id = <code>my_container</code>) looks like:</p>
  
  <pre><code>&lt;div id="my_container"&gt;
     &lt;ul&gt;
        &lt;li id="578" class="notselected"&gt;milk&lt;/li&gt;
        &lt;li id="579" class="notselected"&gt;ice cream&lt;/li&gt;
        &lt;li id="580" class="selected"&gt;chewing gum&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...and afterwards, when I try to access any of the <code>&lt;li&gt;</code> elements using queries like:
  <code>$('#my_container li:first')</code> or
  <code>$('#my_container ul:first-child')</code> or similar, nothing gets selected.</p>
  
  <p>I am using the <a href="http://plugins.jquery.com/project/Listen" rel="nofollow noreferrer">Listen plugin</a> to detect any click events on the <code>&lt;li&gt;</code>elements and it works... But i couldn't figure out how to detect if the div is populated with the output HTML and accordingly change one of the <code>&lt;li&gt;</code>'s class for example... </p>
  
  <p><code>$(document).ready</code> does not work either... </p>
  
  <p>Imagine I need to change the css style of the second <code>&lt;li&gt;</code>.. what is the solution to this?</p>