jQuery的列表視圖改變列表項的顏色

Question

我在JavaScript的吸這麼難 - 我無法弄清楚如何改變列表項的背景色在jQuery的列表視圖...

var parent = document.getElementById('listDiv'); 

var listview = document.createElement('ul'); 
listview.setAttribute('id', 'listView'); 

parent.appendChild(listview); 
var listItem = document.createElement('li'); 
listItem.setAttribute('id', 'temp'); 
var itemLink = document.createElement('a'); 
itemLink.setAttribute('href', '#'); 
itemLink.innerHTML = "HEYY MAN"; 

listItem.appendChild(itemLink); 
listview.appendChild(listItem); 


$('#listView').listview().listview('refresh'); 

//I NEED DIS SHIT TO WORK 
$('#listView').on('click', 'li', function(){ 
    $('#temp').css('background-color','green'); 
}); 

一切都是正確顯示，並且您可以在JSFiddle上玩弄它，但「點擊」功能或背景顏色更改無法正常工作。有人可以伸出援手嗎？

Answer 1

您正在使用的jQuery版本（1.6.4）不支持.on()函數，它僅在版本1.7中引入。我和.bind()取代它讓它暫時的工作：

$('#listView').bind('click', 'li', function(){ 
    $('#temp').css('background','green'); 
}); 

background-color改爲只background以覆蓋jQuery Mobile的造型。

這是工作：http://jsfiddle.net/q3vfh/3/

但是，如果你不依賴於該版本的jQuery那麼我建議使用此更新的小提琴代碼：http://jsfiddle.net/q3vfh/2/ - 它用了jQuery 2.0.2和jQuery移動1.3.1，並允許您使用.on()。

Answer 2

$('#listView').delegate('li','click', function(){ 
$(this).css({background: '#6495ED'}) 
});