For some reason when I dynamically create an unordered list I am unable to get at it through the DOM right away. Here is my code:
var buildNavi = function(){ var naviTemplate ='<li class="prev"><a href="#" title="Previous">Previous</a></li></li><li class="next"><a href="#" title="Next">Next</a></li>'; var naviCont = $("<ul></ul>") .css({'position' : 'absolute', 'top' : gHeight-50}) .append(naviTemplate); gCont.append(naviCont); $("li.next a").click(function(){ nextPage(); }); $("li.prev a").click(function(){ prevPage(); }); }; var buildGallery = function(){ $(gCont).empty(); var initialNum = randPerPage; var galUL = $("<ul></ul>") .addClass("gallery") .css({'overflow' : 'hidden', 'height' : contHeight, 'width' : contWidth}); gCont.css('overflow', 'hidden').append(galUL); $.get(settings.srcURL, {'Media' : settings.media}, function (data){ $(data).find("ThumbSrc").each(function(i){ var srcVal = $(this).text(); $('<img>').attr('src', srcVal) .css({'margin' : iMargin}) .load(function(){ $("<li></li>") .addClass("galleryThumb") .append($(this)) .css({'left' : 0, 'top' : 0, 'position' : 'absolute'}) .appendTo(galUL); }) .hide(0,loadFirstPage(i)); }); }); buildNavi(); }; var loadFirstPage = function(itemNum){ if(itemNum<=startPage){ var imgWidth = $('ul.gallery li:eq('+itemNum+') img').width (); var imgHeight = $('ul.gallery li:eq('+itemNum+') img').height (); var setLeft = $.randomBetween(0,(gWidth-imgWidth)); var setTop = $.randomBetween(0,(gHeight-imgHeight)); $('ul.gallery li:eq('+itemNum+') img').fadeIn('slow'); $('ul.gallery li:eq('+itemNum+')').show().animate({left : setLeft, top : setTop, opacity : 'toggle'}, 'slow'); } }; buildGallery(); Is there someway to make sure that the UL is completely built up with the images in place before running my loadFirstPage function?