Question

I have a large AJAX response which inserts a good amount of HTML. After this I can’t work with any of the newly created IDs or Classes as if they were present when the form was loaded.

I have looked into .live() which solves one of my problems but not the other.

I basically want to show a DIV either by ID or class that was inserted via AJAX .html() when a link is clicked.

Example:

CODE:

html_out = "<div class='span-1'><a href='#' onClick='show_sub_row(\"#sub_row" + id + "\"); return false;'>[ + ]</a></div>";
html_out += '<div class="hidden_sub_row prepend-2" style="display: none;" id="#sub_row' + id + '">';
html_out += 'Content';
html_out += '</div>';
$('#search_results').html(html_out);

Then after the HTML is created I try:

function show_sub_row(sub_row) { 
$(sub_row).show('fast');
}

I know it is referencing the correct ID since I can do a alert(sub_row) and it shows the correct ID that matches the ID shown using FireBug to inspect the hidden DIV.

Answer 1

Unless sub_row is an initialized var somewhere outside of the code you have represented here, the block should be:

function show_sub_row(sub_row) { 
$('#sub_row').show('fast');
}

Also, your actual HTML ID for sub_row contains a # character which may make this even more difficult to pinpoint the real issue. I would modify it to:

html_out += '<div class="hidden_sub_row prepend-2" style="display: none;" id="sub_row' + id + '">';