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

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">
Show Popup
</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+'">'+''+'<font>'+Country+i+'</font>' +'</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+'"><font>Country' + i +'</font></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');
});
});