Listview not rendering right on the second time the page is loaded

Question

I'm having some issues with JqueryMobile. I load a page and create the Listview on the fly. The first time the page loads, the list gets rendered fine, when I go back to the previous page and click on the same link, the listview doesn't render as a list view, just as link. I have multiple pages on the same doc, so I refer the pages by id. Code below.

Where the list gets built.

    function getDays(mon){
        var total = 0;
        $("#h1").text(sites);
        $("#perDay").empty();
        $.getJSON('/cf/cfc/statistics.cfc?method=PagesPerDay', { site: sites , months : mon}, function(qPress) {
            $.each(qPress, function(i, item) {
                total = total + item.pages;
                $("#perDay").append('<li id="' + item.dayname +'"><a href="javascript:void(0);" onClick="getDays();">' + item.dayname + '<span class="ui-li-count">' + item.pages + '</span></a></li>');
            }); 
            $("#perDay").append('<li data-theme="b" class="ui-li ui-li-static ui-body-c ui-li-has-count">Total' + '<span class="ui-li-count">' + total + '</span></li>');               
            ChangePage("#pageDays", 'pop', sites);
        });
    }

The html

    <div data-role="page" id="pageDays">
        <div data-role="header" data-position="inline">
            <a href="#razzberry" data-icon="back" data-theme="b" data-rel="back">Back</a>
            <h1 id="h1"></h1>
        </div>

        <div data-role="content"> 
            <h4 style="text-align:center;">Pages Viewed Per Day</h4>
            <ul data-role="listview" id="perDay"></ul>  
        </div>  
    </div><!-- /page -->    

I tried to put $("#perMonth").listview("refresh"); after the loop but I got Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh

I am using the jQuery Mobile 1.0

Answer 1

The only way I have found to solve it is to use

$("#pageDays").page('destroy').page();