0

li に動的スパンが追加されました - listview の JQuery-Mobile 形式が失われました。スパンをリフレッシュする方法はありますか?

更新されたコード:

追加のコードと html セクションを示します。リストビューは更新されず、標準のクエリ モバイル形式でフォーマットされません。

<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')
4

1 に答える 1

0

Omar のおかげで、ソリューションはシンプルでした。スパンを li でラップするだけで、li elseware を作成して 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');
于 2013-10-04T17:29:03.210 に答える