Cant manipulate Dynamic DOM elements appended on AJAX call
First post...only been discovering the wonders of JQUERY for past 3 weeks (V IMPRESSED !!!)... have read the Sticky by MIKE" Why do my events stop working after an AJAX request?" regarding this too but still cant work things out . Anyway I've appended a LI tag to a UL using AJAX JSON as per example below :
<ul id="menu">
<li class="menuitem">Test 1</li>
</ul>
$.ajax({
type: "POST",
url: "text.aspx/MethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$('#menu').append(msg.d);
//If I put code to manipulate here it will work !!!!!
}
});
**** AFTER AJAX CALL HTML SHOWN FIREBUG *****
<ul id="menu">
<li class="menuitem">Test 1</li>
<li class="menuitem">Page method Test</li>
</ul>
If I try $('.menuitem).length gives 1 instead of 2 !!!!
New element is created fine, Problem is I can't manipulate the new/dynamic elements.I can manipulate the items within the sucess part of the AJAX call but need to be able to do this from elsewhere too. I've insatlled Firebug to look at the DOM and can see the elements are being created but just can't access them.
I've looked at event delegation, live query, and the new live() function in the latest version, but still can't get my head around the best approach or even a solution that works other than putting everything in the success section of the AJAX call.
Hope that makes sense to someone .... i'd be grateful 4 any assistance