4

JSONファイルからデータを取得してから、jquerymobile構造に続くdata-roleなどのhtml構造で表示します...データを取得して表示する方法に関するコードは次のとおりです。

$(document).on('pageinit', function(){
    $.getJSON("http://danielvivancos.com/edu/wordpress/?json=get_posts&post_type=product", function(data){
    var html = "";
        $.each(data.posts, function(index, d){
        html = html + "<li><a href='" + d.slug + "' data-transition='slidedown'><img src='" + d.thumbnail_images.thumbnail.url + "' /><h3 class='ui-li-heading'> Menu" + index + "</h3></a></li>";
        });
        html= "<ul data-role='listview' data-inset='true'>"+ html + "</ul>";
        $(html).appendTo(".choice_list");


    }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
        /* alert(jqXHR.responseText) */
        alert("error occurred!");
    });
});

HTML での出力は次のとおりです。 

<li><a href="link1.HTML" data-transition="slidedown"> <img src="source1"><h3> Menu1</h3></a></li>

<li><a href="link2.HTML" data-transition="slidedown"> <img src="source2"><h3> Menu2</h3></a></li>

<li><a href="link3.HTML" data-transition="slidedown"> <img src="source3"><h3> Menu3</h3></a></li>

しかし、私の問題は、jquerymobile が言うようにコンテンツを表示しても、適用されるべきスタイルがそうではないことです。jquerymobile スクリプトによって追加されたすべてのクラスが、javascript で生成された html に追加されていないことを意味します。どうすれば修正できますか？jquerymobile からスタイルを保持するにはどうすればよいですか? よろしくお願いします！

答え：

 $(html).appendTo(".choice_list").listview();
4

3 に答える 3

2

jQuery モバイル ドキュメントから:

ユーザーが jQuery Mobile 駆動型サイトのリンクをクリックすると、ナビゲーション システムの既定の動作は、そのリンクの href を使用して Ajax 要求を作成することです (ページ全体の読み込みでその href を要求するブラウザーの既定のリンク動作を許可するのではなく)。 . その Ajax リクエストが送信されると、フレームワークはテキスト コンテンツ全体を受け取りますが、レスポンスの body 要素 (提供されている場合はより具体的には data-role="page" 要素) のコンテンツのみを挿入します。ページの先頭が使用されます (特に取得されるページ タイトルを除きます)。

つまり、ページの先頭を参照するスクリプトとスタイルは、ページが Ajax 経由で読み込まれた場合は効果がありませんが、ページが HTTP 経由で正常に要求された場合は実行されます。

参照

作成と更新: 重要な違い

一部のウィジェットが持つ create イベントと refresh メソッドの間には重要な違いがあることに注意してください。create イベントは、1 つ以上のウィジェットを含む生のマークアップを拡張するのに適しています。refresh メソッドは、プログラムで操作され、一致するように UI を更新する必要がある既存の (既に拡張された) ウィジェットで使用する必要があります。

たとえば、ページの作成後に data-role=listview 属性を持つ新しい順序付けられていないリストを動的に追加したページがある場合、そのリストの親要素で create をトリガーすると、リストビュー スタイルのウィジェットに変換されます。さらにリスト アイテムがプログラムによって追加された場合、リストビューの refresh メソッドを呼び出すと、それらの新しいリスト アイテムだけが拡張状態に更新され、既存のリスト アイテムは変更されません。

.trigger("create")ロードした後にしたい。

于 2013-08-27T16:19:21.910 に答える