Reputation: 8711
I am using following code to create a list dynamically. It works fine but when I click the particular list item, then the selected row's font color should turn yellow. How can I do it?
Thanks in advance.
$('#DateListView').children().remove('li');
//Make a new list
var parent = document.getElementById('DateListView');
for (var menuid = 0; menuid < weekStartDates.length; menuid++) {
var listItem = document.createElement('li');
listItem.setAttribute('id', 'listitem_' + weekStartDates[menuid]);
listItem.innerHTML = "<div data-role='button' style='margin-left:10px;font-size:15px'data-theme ='c' id='" + menuId + "'>" + Hai +"</div>";
parent.appendChild(listItem);
}
var list = document.getElementById('DateListView');
$(list).listview("refresh");
$('#DateListView li ").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Upvotes: 1
Views: 4055
Reputation: 85298
is this a typo? $('#DateListView li ") should have matching single or double quotes
This:
$('#DateListView li ").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Should be:
$('#DateListView li').bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
or:
$("#DateListView li").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
Also you might want to call the refresh after your added markup
$("#DateListView li").bind("click", function() {
$(this).setAttribute("style" , "font-color:yellow");
});
$(list).listview("refresh"); // Move after added markup
UPDATE:
$("#DateListView li").bind("click", function() {
$(this).attr("style" , "font-color:yellow");
});
$(list).listview("refresh"); // Move after added markup
Upvotes: 2