JQuery Mobile - span refresh within li

问题

dynamic span added to li - lost JQuery-Mobile format of listview. Is their a way to resfresh the span?

UPDATED CODE:

shows additional code and html section, listview will not refresh or format in standard query-mobile format:

<div data-role="page" data-theme="b" id="one" data-add-back-btn="true">
    <div data-role="header">
        <h1>CHATS</h1>
        <a class="ui-btn-right" id="infoButton" onclick="emptyRegions();">Refresh</a>
    </div><!-- /header -->

    <div data-role="content" data-theme="b" id="regions">   

        <div data-role="content">

            <ul data-role="listview" data-inset="true" id="timeStatus">
                <!-- AJAX CONTENT -->
            </ul>
        </div>

        <div data-role="collapsible" id="collapsible3">
            <h4>Regions I, II, III</h4>
            <ul data-role="listview" data-inset="true" id="region3">
                <!-- AJAX CONTENT -->
            </ul>
        </div>


$.get(URL_R3, function(data) {
            $(data).find("tr:has(td.Chats)").each(function () {
                var $li = $('#region3').append('<li></li>');
                var $tds = $(this).find('td');
                $li.append('<span class="countyHx">' + $tds.eq(0).html() + '</span><br>' 
                + '<span style="width: 20%; background-color: yellow;">' 
                + $tds.eq(1).html() + '</span>' 
                + '<span style="width: 20%; background-color: red;">' 
                + $tds.eq(2).html() + '</span>' 
                + '<span style="width: 20%; background-color: green;">' 
                + $tds.eq(3).html() + '</span>' 
                + '<span style="width: 20%; background-color: orange;">' 
                + $tds.eq(4).html() + '</span>' 
                + '<span style="width: 20%; background-color: purple;">' 
                + $tds.eq(5).html() + '</span>');
            });

        $('#region3').listview('refresh');

}, 'html')

回答1:

Thanks to Omar the solution was simple, just wrap the span in a li, I had created li elseware and appended it to the ul.

            $(data).find("tr:has(td.Chats)").each(function () {
                var $li = $('#region3'); //.append('<li></li>');
                var $tds = $(this).find('td');
                var txtcolor = $( this ).css( "color" );
                $li.append('<li style="height: 24px;"><span>' + $tds.eq(0).html() + '</span><br>' 
                + '<span style="float: left; width: 20%; height: 24px; background-color:' 
                + $tds.eq(1).css("background-color") + '; color:' + $tds.eq(1).css("color") + ';">' 
                + $tds.eq(1).html() + '</span>' 
                + '<span style="float: left; width: 20%; height: 24px; background-color:' 
                + $tds.eq(2).css("background-color") + '; color:' + $tds.eq(2).css("color") + ';">' 
                + $tds.eq(2).html() + '</span>' 
                + '<span style="float: left; width: 20%; height: 24px; background-color:' 
                + $tds.eq(3).css("background-color") + '; color:' + $tds.eq(3).css("color") + ';">' 
                + $tds.eq(3).html() + '</span>' 
                + '<span style="float: left; width: 20%; height: 24px; background-color:' 
                + $tds.eq(4).css("background-color") + '; color:' + $tds.eq(4).css("color") + ';">' 
                + $tds.eq(4).html() + '</span>' 
                + '<span style="float: left; width: 20%; height: 24px; background-color:' 
                + $tds.eq(5).css("background-color") + '; color:' + $tds.eq(5).css("color") + ';">' 
                + $tds.eq(5).html() + '</span></li>');
            });

            $('#region3').listview('refresh');

来源：https://stackoverflow.com/questions/19185236/jquery-mobile-span-refresh-within-li