jQueryMobile Change listview's item attributes dynamically

Question

I want to change dynamically (click event) a data-theme of a list item in a jQueryMobile listview. Firebug shows me that the change is performed but the list is not refreshed. (If I add elements it works, but with attribute changes the list won't be refreshed.) For example I want to change the data-theme from c to f when the item is clicked.

I tried everything I read in this forum, from trigger('mouseout') over trigger('create') on parents to refreshing the whole page, but no effect at all, so I guess I am blind to see something obvious. Maybe somebody can give me a hint... :)

<script>

function fillList() {
    var li = '<li data-theme="c"><a href="#" class="info">List item</a></li>';
    $("#alist").empty().append(li).promise().done(function () {
        $(this).off("click").on("click", ".info", function (e) {
            e.stopImmediatePropagation();
            e.preventDefault();
            var theLiElem = $(this).closest('li');
            theLiElem.attr('data-theme','f').trigger('mouseout');
            theLiElem.trigger("create");
        });
        $(this).listview("refresh");
    });
}

$(document).on("pageinit", "#info-page", function () {
    fillList();
});

</script>

<div data-role="page" id="info-page">
    <div data-role="content">
        <ul data-role="listview" id="alist" data-inset="true">
        </ul>
    </div>    
</div>

Kind regards,

Steve