これに似た質問が何度か投稿されていますが、うまくいく解決策が見つかりません。うまくいけば、誰かが助けることができます!
私は jQuery Mobile 1.1 と jQuery 1.7.2 を使用しているため、最新の安定版リリースを使用しています。動的なページ ヘッダーを作成したいと考えています。この HTML コードを使用すると、正常に動作します。
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
次に、タイトルを動的に作成します。HTML を次のように変更します。
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
そして、次の jQuery コードを追加しました。
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
タイトルは表示されますが、スタイルが設定されていません。これに関するいくつかの投稿を見つけました。jQuery Mobile Documentation には、次のように書かれています。
「ただし、クライアント側で新しいマークアップを生成するか、Ajax を介してコンテンツを読み込んでページに挿入する場合は、create イベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。これはトリガーできます。任意の要素 (ページ div 自体も含む) で、各プラグイン (リストビュー ボタン、選択など) を手動で初期化するタスクを節約できます。
たとえば、HTML マークアップのブロック (ログイン フォームなど) が Ajax を介して読み込まれた場合、create イベントをトリガーして、そこに含まれるすべてのウィジェット (この場合は入力とボタン) を拡張バージョンに自動的に変換します。このシナリオのコードは次のようになります。
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
だから私はいくつかのことを試しました。上記のコードの後に、次を追加しました。
dirHeader.trigger("create");
これは効果がありませんでした。だから私はそれを実際の追加自体に入れようとしました:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
これは効果がありませんでした。次に、親要素でプロセスを試しました (この場合、親 div の ID は「levela」です)。だから私はこれを試しました:
$('#levela').trigger("create");
これも効果がありませんでした。この時点で、私は完全に迷っています。すべての解決策には、私が試したことのいずれかを実行することが含まれており、機能していません。信じられないほど基本的なものが欠けているに違いありませんが、それを見つけることができないようです。
よろしくお願いします。