Unable to Refresh listview item in PhoneGap Android Application

Question

I am using a dynamically created list. When a list its is clicked it should highlighted by changing it's data theme. I am doing this to achieve the objective:

$('#' + AudioNo).attr('data-theme','b');
$('#' + AudioNo).listview('refresh');

However the list doesn't refresh and the theme doesn't change (from e to b).

Using the following command also shows that data-theme has changed to 'b', but I can't see the visual impact of change of color:

alert ($('.MainMenu').html() );

Any idea what I am doing wrong?

Thanks

==== EDIT ======

This is how the list itself is created:

    mTitle = "My Title";
gHtml +=   '<li data-role=list-divider>' + mTitle + '</li>';
for ( x = 1; x < 10; x++)
{
    gHtml +=   '<li data-icon=arrow-r id="' + x + '" data-theme=""' + '>';
    gHtml +=      '<a name="' + x + '">' + "Title" + x + '</a>';
    gHtml +=   '</li>';

}

$('.MainMenu').empty();
$('.MainMenu').append(gHtml);
$('.MainMenu').listview('refresh');

Answer 1

You can refresh any jQuery mobile list view using:

$('#'+list_id).trigger('create');
$('#'+ list_id).listview('refresh'); 

you may want to read this conversation about your issue.

Answer 2

$('.MainMenu').empty();
var gHtml = "";
var mTitle = 'My Title';
gHtml =  '<li data-role="list-divider">' + mTitle + '</li>';
for ( var x = 1; x < 10; x++)
{
      gHtml +=   '<li data-icon=arrow-r id="' + x + '" data-theme="b">';
      gHtml +=      '<a name="' + x + '">' + 'Title' + x + '</a>';
      gHtml +=   '</li>';

 }                      
 $('.MainMenu').append(gHtml).trigger('create');
 $('.MainMenu').listview('refresh');