jQuery Mobile dynamically remove data-theme then refresh <ul>

Question

I am implementing a “have not yet viewed” list where the user sees a list of items in a ul and those the user has not viewed have a data theme applied to highlight them. When the user clicks on the item it is displayed, and I need to remove the data theme so the item is no longer highlighted.

I have the logic correct to actually remove the attribute as I can see in the Elements section of Chrome's Developer Tools the attribute is no longer in the li. But the highlight is still visible in the rendered page.

I've searched and have seen a number of suggestions involving refreshing the page, list, etc., all to no avail. You can see some of the attempts as follows (in the function "this" is the li):

    $(this).removeAttr("data-theme");
    //$(this).closest("ul").listview("refresh");
    //$(this).closest("ul").listview();
    //$('#mylist').listview();
    //$("#content-notifications").page();
    //$("#content-notifications").page("destroy").page();
    //if ( $("#content-notifications").data("page") ) {
    //      $(this).closest("ul").listview("refresh");
        //};

Anyone have the correct solution, because I can't find it!

Thanks-

Matt

Answer 1

You have to manually remove the class for the old theme in li and add the class for new theme.

$(document).on("click","li",function(){
  $(this).attr("data-theme","b").removeClass("ui-btn-up-a").addClass("ui-btn-up-b")
});

Demo here - http://jsfiddle.net/ENYxw/