Access DOM elements after ajax.load

Question

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..

This is how i retrieve and insert the HTML:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) {$('#my_container').html(outData);} 
})

The outcome HTML, which is inserted into the <div> (id = my_container) looks like:

<div id="my_container">
   <ul>
      <li id="578" class="notselected">milk</li>
      <li id="579" class="notselected">ice cream</li>
      <li id="580" class="selected">chewing gum</li>
   </ul>
</div>

...and afterwards, when I try to access any of the <li> elements using queries like: $('#my_container li:first') or $('#my_container ul:first-child') or similar, nothing gets selected.

I am using the Listen plugin to detect any click events on the <li>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 <li>'s class for example...

$(document).ready does not work either...

Imagine I need to change the css style of the second <li>.. what is the solution to this?

Answer 1

Are you sure your actual request is successful? If nothing is selected, the most probably reason is that nothing was actually inserted into #my_container in the first place.

Answer 2

How are you checking to see whether your AJAX call has completed? Because it's asynchronous, the elements will not, of course, be available to the code which executes immediately after your $.ajax(…) call.

Try manipulating those elements from within the success function or in other code which is called from there — at that point, you will know that the content is available.

Answer 3

First, try the following code (in place of the original AJAX call you showed):

var html = $.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   async: false
}).responseText;
$('#my_container').html(html);

If that works, your li:first selector is just being called before the AJAX request finishes. If that doesn't work, try the following code:

$.ajax({url: 'output.aspx',
   data: 'id=5', 
   type: 'get', 
   datatype: 'html',
   success: function(outData) { $('#my_container').html(outData); }, 
   error: function(errorMsg) { alert('Error occured: ' + errorMsg); }
});

That will cause an error message to pop up if the request fails. If an error message pops up with an error message, the request is not returning.