4

jQuery モバイル 1.2.0

JavaScript を使用して HTML を生成し ( $(selector).html(content))、それを DOM に追加して表示します ( $.mobile.changePage())。

次に、AJAX 呼び出しを呼び出し、データを取得し、html を再生成します (ただし、親要素は同じ$(selector)ままで、変更するだけhtml(...)です)。
この時点では、HTML は jQM によって「強化」されておらず、スタイリングも適用されていません。

ドキュメントによるとpage()、親要素で関数を呼び出すだけ$(selector).page()です。

createドキュメントの他の場所では、イベントのトリガーを提案してい$(selector).trigger("create")ます。

問題は、上記の 2 つの方法のいずれも機能しないことです。jQM のスタイリングが適用されません。

jQMのコードを見て、その要素でイベントをトリガーしようとしましたがpagecreate、うまくいきますが、これはどこにも文書化されていないため、特にjQMの将来のリリースに関しては確信が持てません.

私が読んだドキュメントのいくつかのポインでpage()、ページで一度だけ呼び出すことができます..

とにかく、jQMに要素全体とその子要素を「強化」するように指示する簡潔/標準的な方法はありますか? pagecreateそれとも、単にイベントをトリガーすることにとどまるべきですか?

ありがとうございました！

4

2 に答える 2

1

ページ全体を再作成するには、これを使用します。

$(selector).trigger("pagecreate");

これは、同様の質問に対する私の答えでした: https://stackoverflow.com/a/14011070/1848600。ページの再作成の例があります。見てください、これはおそらくあなたの問題を解決するはずです。

于 2012-12-30T00:04:23.417 に答える
1

$(selector).trigger("create"); のスコープは何ですか?

「pageshow」jqm スタイリングが要素に適用される直前に発生する「pagecreate」イベントに要素を追加できるはずです。たとえば、このようなヘッダー/フッターを動的に追加します

$(document).on('pagecreate', "[data-role=page]", function() {

var header = "<div data-role='header'>some header stuff</div>";
 var footer= "<div data-role='footer'>some footer stuff</div>";

$(this).prepend(header);
$(this).append(footer);

$("[data-role=header]").fixedtoolbar({tapToggle: false});
$("[data-role=footer]").fixedtoolbar({tapToggle: false});

});

jquery 1.7 以降を使用していることを確認してください。on メソッドが導入されたのはその頃だと思います。

DOM を生成してからページを変更している可能性があるようです。逆の方法で試してみてください。最初にページに移動してから、DOM を動的に編集します。

編集ページの再読み込みオプションをtrueに設定

  $.mobile.changePage($(page), {reloadPage: true});

編集 2

$(selector).children().each(function(){
   $(this).trigger('create');
})
于 2012-12-30T04:10:31.417 に答える