jquery/jquerymobile - image inside collapsible>listview

[Prasoon Chaudhary]

I am trying to create a dynamic collapsible-set which would contain text and image. Texts are appearing fine but as soon as I try to write code (see commented line) for image, browser doesn't display it correctly. It takes 2-3 clicks to open the collapsible, and it gets stuck most of the time. Here is my code:

$("#dvAccordion").empty();
var outdiv = $('

');
$(strXML).find('Category').each(function(){
var colldiv = $('

');
colldiv.append('

' + $(this).find('Category_Name').text() + '

');
var uldiv = $('

');
colldiv.append(uldiv);
//
$(this).find('Menu_Item').each(function(){
var sItemName = $(this).find('item_name').text() ;
//var sImageUrl = $(this).find('item_image').text() ;
var sImageUrl = "images/food1.jpg" ;
uldiv.append('* ' + sItemName + '
');
//uldiv.append('* ' + sItemName + '
');
});
//
outdiv.append(colldiv);
outdiv.appendTo('#dvAccordion');
});
//$('#dvAccordion [data-role=collapsible-set]').collapsibleset();
//$('#dvAccordion').collapsibleset('');
//$('#dvAccordion').collapsibleset('refresh');
$('#dvAccordion').trigger('create');

Where am I wrong? If I try to generate the collapsible with listview and images static way in html - everything works fine. jsFiddle - http://jsfiddle.net/yesprasoon/68v8p/ Surprisingly, images are appearing properly in fiddle. But it doesn't appear in my local file/ localhost address/ phonegap application. :-(