1

私はjQuery Mobileを使用してモバイルプラットフォーム用の単純なWebアプリを構築しています。その中で、JSONとして送信するAPIからいくつかのデータを読み取り(サーバー側のDjangoベースのプロジェクトから公開しました)、jQueryを使用して解析しますそのデータに基づいてリスト要素を作成します。今、私は次の index.html を持っています:

<html>

    <head>
        <title>Playism App</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/jsonParser.js"></script>

        <link rel="stylesheet" type="text/css" href="css/major.css">
        <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
        <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">
    </head>

    <body>
        <p>List of games: </p><br/>
        <div id="gameContainer" data-role="page">
            <ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">
                <!-- Content here will be dynamically generated based on the JSON output parsed from the API feed -->   
                <li><a href="#">Dummy</a></li>
            </ul>       
        </div>
        <script type="text/javascript" src="js/gamesRenderer.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){ 
                renderGames();
            });
        </script>
    </body>
</html>

ここで、ダミー リスト要素を作成してテストしましたが、レンダリングは完璧ですが、jQuery から .append() 呼び出しを使用して挿入した新しい要素にはスタイリングが適用されません。コードは次のとおりです。

function renderGames(){
    for (var i = objCreated.length - 1; i >= 0; i--) {
        $("ul#gamesList").append("<li><a href='#''>" + objCreated[i].name + "</a></li></ul>");

    };
}

index.html に見られるように、私はそれを DOM 対応で呼び出していますが、これらの手動で挿入されたリスト要素には jQuery モバイル スタイルが適用されませんが、ダミー要素は適切なスタイルを取得します。要素が呼び出される順序に問題があると思います。前もって感謝します ！

4

3 に答える 3

0

for ループが css を正しくロードできないようです。「objCreated」とは何かわかりません。

ここでJSFiddleのコードを移行してみてください。コードは次のとおりです。

<body>
    <p>List of games: </p><br/>
    <div id="gameContainer" data-role="page">
        <ul data-role="listview" data-inset="true" data-filter="true" id="gamesList">

            <li><a href="#">Dummy</a></li>
        </ul>       
    </div>


</body>

$(document).ready(function(){ 
    renderGames();
});

function renderGames(){

   $("ul#gamesList").append("<li><a href='#''>Hello world!</a></li></ul>")

}

css は、注入された要素で動作するようです。jQuery Mobile UI css が機能するため、リスト スタイルは「なし」です。

于 2013-09-26T05:29:35.877 に答える
-1

最初にcssを適用し、 cssファイルが正しくリンクされていることを確認してください

    <link rel="stylesheet" type="text/css" href="css/major.css">
    <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile-1.3.2.min.css">
    <link rel="stylesheet" type="text/css" href="js/jm/jquery.mobile.theme-1.3.2.min.css">

次にJSを実行し、jsファイルが適切にリンクされていることを確認します

  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jm/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jsonParser.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){ 
            renderGames();
        });
    </script>
于 2013-09-26T04:43:02.813 に答える