web-dev-qa-db-ja.com

jQuery Mobileは、コンテンツを動的に追加した後にスタイルを適用しません

私はこの質問がいくつかの場所に現れることを知っています（ 動的に挿入されたコンテンツのスタイル/テーマを再評価するようjQuery Mobileに強制する ）が、私のために働いている答えはありません。

私はajaxを使用してコンテンツをロードし、次のようにdivに挿入しています：

       $.ajax({
            url: "../Services/CalendarService.cshtml?service=true",
            cache: false,
            success: function (data) {

                data = $.parseJSON(data);
                var s = $("#user_tmpl").html();
                var s1 = tmpl(s, data);

                $("#target").html(s1);
                $("#targetRefresh").page();
            }
        });

Htmlを追加するターゲットとページの両方にtargetRefreshを設定しようとしましたが、運がありません。内容は挿入されますが、スタイルは適用されません。

私も試しました

.trigger("enhance")

何をすべきか考えていますか？

挿入されたhtmlはこれらの束です：

<div data-theme="e" data-collapsed="true" data-role="collapsible">         <h3>MyOwner2AA</h3>         <p>MyDescription</p>         <p>/Date(1320339836735)/</p>         <p>MyOwner</p>         <i></i>     </div>

助けてくれてありがとう

ラルシ

ajaxjquery-mobile
42
Larsi

新しいコンテンツを持つ要素で.trigger("create")を呼び出してみてください。

jQuery Mobile docs によると、「createイベントは、1つ以上のウィジェットを含む生のマークアップを強化するのに適しています。」

[〜＃〜] edit [〜＃〜]：jQuery Mobile 1.4以降、.trigger('create')非推奨 、代わりに.enhanceWithin()を使用する必要があります。 （ヘッズアップについてはジョン・マックに感謝します。）

92
Phil

これはリストビューで私のために働いた

$('ul').listview('refresh');

また、折りたたみ式を更新できます

$('#element').collapsibleset('refresh')
33
Sagar Gala

上記の解決策を試したときに、Firebugでエラーメッセージが表示されました

キャッチされない例外：初期化前にリストビューでメソッドを呼び出すことはできません。メソッド 'refresh'を呼び出そうとしました

しかし、私が呼び出した新しい要素の追加後に.trigger("create")を呼び出す代わりに、これに対する修正を見つけました

$("ul").listview();

ajaxコールバック関数の最後。

これにより、すべてがうまく機能しました。それが役に立てば幸い。

5
Christopher Käck

上記を逃した人のために、コンテンツを動的に追加した後にJQMスタイルを再適用するには、次のようにします。

$('.myelement').html( myHtmlStr ).enhanceWithin();
4
MannyC