Note that there are some explanatory texts on larger screens.

plurals
  1. POAccess DOM elements after ajax.load
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload