2

私の問題の非常に単純な例を示すために、コードから非常に小さなスニペットを取り出しました。JSFiddleに入れました-> http://jsfiddle.net/hollycoffee/LjLMU/

同じ問題を抱えている他の人を調査して見つけました。彼らはaddClassまたはrefresh jQueryメソッドを試したので、コード内のいくつかの異なる場所で両方を試しましたが、何もうまくいきませんでした.JSFiddleで簡単な例を作成することで、誰かが私に欠けているものと場所を正確に指摘できます。

例はランダムで意味がありませんが、私が行き詰まっているのは、メニューの動的な部分、つまりスキル リストだけがスタイルを失っているという事実です。

メニュー部分のマークアップは次のようになります。

<header data-role="header" data-position="absolute" data-theme="a">
    <h1>View Skills</h1>
    <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
</header>

<!-- Starting our left side menu panel -->
<div data-role="panel" id="left-panel" data-theme="a">
    <ul data-role="listview" data-theme="a">
        <li data-icon="back"><a href="#" data-rel="close">Back Home</a></li>
    </ul><br />

    <div class="ui-header ui-bar-a" data-theme="a">Settings</div>
    <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
        <h3>Optimization Settings</h3>
        <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
            <ul data-role="listview">
                <li><a href="#" data-rel="close">Colors</a></li>
                <li><a href="#" data-rel="close">Preferences</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->

    <div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
    <div id="skillsList"></div>

    <div class="ui-header ui-bar-a" data-theme="a">Saved</div>    
    <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
        <h3>Saved Searches</h3>
        <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
            <ul data-role="listview">
                <li><a href="#" data-rel="close">Angry Birds</a></li>
                <li><a href="#" data-rel="close">Professional Events</a></li>
            </ul>
        </div><!-- /collapsible-set -->
    </div><!-- /collapsible -->
</div><!-- / Menu panel -->

次の JavaScript で埋められている skillDiv を除いて、すべてが適切に見えます。

function CreateSkillsList(skills){
    var skillsDiv = $('#skillsList');
    var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\"    data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
    html += "<ul data-role='listview'>";

    var size = skills.length;
    for (i=0; i<size; i++) {
        html += "<li><a href=\"#\" data-rel=\"close\"><div id='Skill" + i + "'></div>   </a></li>";
    }

    html += "</ul></div></div>";
    skillsDiv.html(html);     
}

各スキルはリスト項目として表示されますが、CSS はありません。

これが JSFiddle です。左上のメニュー ボタンを使用して、スタイルのないスキル リストを表示できます。

http://jsfiddle.net/hollycoffee/LjLMU/

助けてくれてありがとう、StackOverflowの天才はいつも私を助けてくれます! -ホリー

（簡単なメモの更新 - 私の実際のアプリケーションでは、私は使用しません$(document).ready()- 私はそれをこの例に入れて、私のために配列を埋めました.私の実際のアプリケーションは、外部 API によって埋められた配列を取得するので、これが最も簡単だと思いました作り直す方法です。）

4

2 に答える 2

3

編集：これを関数の最後に追加します

$('[data-role=page]').trigger('pagecreate');

$('[data-role=panel]').trigger('updatelayout');パネルに項目を動的に注入した後に追加するだけです。

デモ

于 2013-05-07T22:38:44.623 に答える
0

使用する：

$('#panel-id').html(yourHtmlHere);
$('#panel-id').trigger('create');
$('#panel-id').trigger('updatelayout');

スタイリング用の標準 CSS。

于 2015-10-17T02:14:14.530 に答える