3

新しいページの読み込みでは、コードは正常に機能し、正しい情報が表示されますが、逆方向に移動して再試行すると、最初のクリックからの情報が表示されます。まず、ここにコードを示します。私が持っているものを説明します...

$(document).on('pageinit', '#months', function(){
    $('#listOfHolidays').on('click', 'li', function () {
        listIndex = $(this).index();
        $.mobile.changePage('#detail');
    });
});
$(document).on('pageinit', '#detail', function(){
    console.log(listIndex);
    $('#ho').text(holidayNames[listIndex]);
    $('#hi').text('The index of the list item clicked is: ' + listIndex);

});

data-role="page"選択する項目のリストを含むという名前の2 ページ (#monthsの div) と、リストからのユーザーの選択に基づいて入力するページである #detail があります。リストビューの ID は で、リスト内の各項目の値を保持するものは#listOfHolidays、arrayholidayNames と呼ばれます。次に、この基本情報を詳細ページの #hi および #ho という名前の div に表示します (これの一部は変更されます。この問題から抜け出す方法をテストしようとしています)。詳細のヘッダーでも戻るボタンを有効にしています。

私が言ったように、これを新たにロードすると、正しい休日名とインデックス番号が詳細ページに表示されますが、戻るボタンを使用して戻って再試行すると、詳細ページに最初と同じ情報が入力されますclick.

これは、jquery が 2 番目の$(document).on()関数で詳細ページを初期'pageinit'化しているためだと思います。選択した最初のインデックスと休日名で初期化されているため、再度初期化する必要はなく、最初のリクエストからデータを描画します。別のリスト項目をクリックします。

それは何が起こっているのかについての私の漠然とした理解です。間違っているところを修正し、正しい方向に導いてください!

ありがとう！

4

1 に答える 1

2

「pageinit」イベントは、ページが DOM に導入されたときにのみ発生します。したがって、休日のテキストを新しいものに置き換えるためにバインドしたコードは、元のクリックでのみ起動します。次の数回のクリックでは、その関数は起動しません。

「pagebeforeshow」にバインドすると、ページを変更するたびにトリガーされ、そこで同じ関数をバインドでき、正しく機能するはずです。

$(document).on('pagebeforeshow', '#detail', function () {
  console.log(listIndex);
  $('#ho').text(holidayNames[listIndex]);
  $('#hi').text('The index of the list item clicked is: ' + listIndex);
});

例を単純化するためにいくつかのものを削除しました。

JSFiddle の例

于 2013-05-16T18:51:31.220 に答える