Home/ Questions/Q 104401
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T01:16:33+00:00

I am inserting the HTML response from an AJAX call into my page, but

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0