Change the background color of listview item when its selected in jquery mobile 1.4.0

Question

I have a list view inside a popup , when the user select a list element I want to change this element "li" background color , I have tried the following code it was working on jQuery mobile 1.3.2 but it didn't work when i upgraded my app to 1.4.0 , How can I change the background color of the list element when the user click on it ? please help me

<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content"> 
<a href="" data-rel="popup" id="Btn1" class="ui-btn  ui-corner-all" data-inline="true">Show Popup</a>

</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data- overlay-theme="a" data-dismissible="false">
    <div data-role="header" data-theme="a">

        <div style="text-align:center;float:center;padding-top:11px;">
        <font size="6px" color="white">Countries</font>

        </div>
    </div>
    <div id="scrollContent" class="content" data-role="content" style="background-color: white;">
        <ul data-role="listview" id="countrieslist" style="margin: 0 !important;">

        </ul>
      </div>
    </div>
   </div>

Java script code

$('#index').on( 'pageinit',function(){


   for(var i=1;i<=50;i++)
   {

        $('#countrieslist').append('<li id="'+i+'">'+'<a href="#" style="background:transparent !important;">'+'<font>'+Country+i+'</font>' +'</a></li>');                

   }

   $('#countrieslist').listview('refresh');
 });

 $('#Btn1').on('touchstart', function(){ 

        $(this).css({background: 'white'});
        $(this).attr('href','#MyPOPUP');    
});

 $('#countrieslist').on('click','li', function() {

    $(this).css({background: 'blue'});
    selected_elem =  $(this).attr('id');
   alert('you selected' + selected_elem);
       $('#MyPOPUP').popup('close');


 });

Answer 1

You have a little typo in your loop that creates the countries, but other than that the code seems to work,

Here is a working DEMO

Because pageinit is deprecated n 1.4, I have used pagecreate; and in the for loop the word country after the font tag should be within the single quotes as it is not a variable. Also, in the li click, I reset all other countries to transparent background before setting the newly selected one:

$(document).on( 'pagecreate', '#index',function(){
   for(var i=1;i<=50;i++) {
        $('#countrieslist').append('<li id="'+i+'"><a href="#" style="background:transparent !important;"><font>Country' + i +'</font></a></li>');                
   }
   $('#countrieslist').listview('refresh');

    $('#Btn1').on('click', function(){ 
        $(this).css({background: 'white'});
        $(this).attr('href','#MyPOPUP');    
    });

    $('#countrieslist').on('click','li', function() {
        $('#countrieslist li').css({background: 'transparent'});
        $(this).css({background: 'blue'});
        selected_elem =  $(this).attr('id');
        alert('you selected' + selected_elem);
        $('#MyPOPUP').popup('close');
    });
});