1

ここで私の問題を説明する簡単な例を作成しました: https://github.com/kanese/jqm-page-state

基本的に、id=content の div を持つ page1.html があり、その色を赤に変更します。id=content の div を持つ page2.html があり、その色を緑に変更します。

page1 に移動すると、予想どおり、div のテキストの色が赤になります。page2 に移動すると、期待どおり、div のテキストの色が緑色になります。

page1 から page2 に移動する単純なアンカー href があります。クリックすると、page2 が読み込まれ、それに応じて div 内のテキストが変更されます。ただし、文字の色は変更されません。黒い。

ajax がページ ナビゲーションを処理する場合、ページの状態は元のページのコンテキストのままであると言われました。したがって、page2 に移動すると、実際にはまだ page1 にいますが、page2 のコンテンツの一部が DOM に読み込まれます。

これを回避するにはどうすればよいですか?

適切な解決策はありますか？または、手動でアドレスバーに入力したかのように、まったく新しい page2 をロードするだけの単純なものでさえありますか?

4

1 に答える 1

2

両方のページに同じものを使用しておりid、Ajax が有効になっているため、両方のページが同じ DOM 内にあります。ターゲットにする要素とページを指定する必要があります。

$("#content")はDOMの最初の要素を返すため、ページイベントを使用して、現在のページまたは移動しようとしているページ内のその要素をターゲットにする必要があります。これは、ほぼすべてのページ イベントを使用して実現できます。

$(document).on("pagecontainershow", function () {
   var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
   if (activePage.attr("data-url") == "page2.html") {
      // target content within active page
      // Or activePage.find("#content").css...
      $("#content", activePage).css({ color : "green" });
   }
});

上記は基本的な例です。より高度なソリューションがあります。

于 2014-06-15T23:59:16.567 に答える