Finder
Finder

Reputation: 8711

Jquerymobile ListView

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

Answers (1)

Phill Pafford
Phill Pafford

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

Related Questions