Изменение цвета фона элемента списка при его выборе в jquery mobile 1.4.0

Question

У меня есть вид списка внутри всплывающего окна, когда пользователь выбирает элемент списка. Я хочу изменить этот цвет фона «li», я попытался следующий код, который он работал над jQuery mobile 1.3.2, но он не работал, когда я обновил свое приложение до 1.4.0. Как изменить цвет фона элемента списка, когда пользователь нажимает на него? пожалуйста, помогите мне

<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 скрипт

$('#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

У вас есть немного опечатка в вашем цикле, который создает страны, но кроме того, что код, кажется, работает,

Здесь является рабочим DEMO

Поскольку pageinit устарел n 1.4, я использовал pagecreate; и в цикле for слово «страна» после тега шрифта должно быть в одинарных кавычках, поскольку оно не является переменной. Кроме того, в Li мыши, сбросить все другие страны на прозрачный фон перед установкой вновь выбрал:

$(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'); 
    }); 
});