1

jQuery モバイル サイトの詳細ページの 1 つで、ネストされた div に iScroll を設定しました。基本的に何が起こるかというと、メイン ページ (「about」ページの場合) のボタンをクリックすると、ハッシュ リンク (収集したものから Ajax を使用) のある場所に移動します。例：

http://www.example.com/#about.php (これは iScroll では機能しません。ところで、これは明らかに実際の URL ではなく、単なる構文の例です)

基本的に、URL を単独で (ハッシュされていないリンクとして) ロードすると、iScroll は正常に動作しますが、メイン ページからクリックしてロードすると、iScroll がロードされず、機能しません。例：

http://www.example.com/about.php

ハッシュ化されたリンクではなく直接リンクにリンクするためのアンカーを取得するにはどうすればよいですか<li>、またはiScroll javascriptをAjaxでロードされたリンクにロードする方法を学ぶ方がよいですか? 助けてくれてありがとう。

アップデート：

aboutページにリンクしたリストビューに使用した構文は次のとおりです。これは、私が読んだどこでも使用されている基本的なリストビュー構文です。私が扱っているのは、現在 5 番目のリンク (ABOUT) だけです。アンカーでハッシュを使用していませんが、それでもハッシュされた場所にリンクしています。興味深いのは、これは http://www.example.com/index.php#about.php ではなく、単にhttp://www.example.com/#about.phpであることです。

<ul data-role="listview">
        <li><a href="#nav1">TEST</a></li>
        <li><a href="#nav1">TEST 2</a></li>
        <li><a href="#nav1">TEST 3</a></li>
        <li><a href="#nav1">TEST 4</a></li>
        <li><a href="about.php">ABOUT</a></li>
 </ul>
4

1 に答える 1

1

ハンドラー内で iScroll の初期化をバインドしていると思いますdocument.ready。この場合は、委任されたイベント ハンドラーに変更する必要があります (これは jQuery Mobile の標準的な方法です)。

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = new iScroll('id-of-element');
});

重要: $(document).ready() ではなく、pageInit() を使用してください

jQuery で最初に学ぶことは、$(document).ready() 関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

ソース: http://jquerymobile.com/demos/1.0/docs/api/events.html

簡単に言うと、jQuery Mobile は AJAX を使用して新しいページを DOM に取り込みますが、これには多くの副作用があります。

  1. 一度に複数のページが DOM に存在する可能性があるため、すべての ID はサイト全体で一意である必要があります。
  2. 外部ページ ( <a href="about.html">About</a>) にリンクする場合、data-role="page"要素とその子孫のみが取得されます (他のすべては無視されます)。
  3. $(document).ready()AJAX を介して取得されたページはこのイベントを発生させないため、信頼することはできませんpage events。ここで指定されているように発生します: http://jquerymobile.com/demos/1.0/docs/api/events.html

別のページにリンクするときにリロードを強制したい場合は、いくつかのオプションがあります。

  1. `を入れrel="external" on the link tag:て
  2. data-ajax="false"リンクタグをつけます :<a data-ajax="false" href="about.html"></a>
  3. リンクの AJAX 処理をグローバルに無効にする: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

ただし、これらの方法を使用するとトランジションが無効になることに注意してください。

アップデート

ハッシュ化されたリンクを取得している場合は、機能をオフにしているかhistoryPushState、古いバージョンの jQuery Mobile を使用していることを意味します。古いバージョンを使用している場合は、1.0 にアップグレードすることを強くお勧めします (1.0 RC3 と 1.0 Final ではパフォーマンスが大幅に向上しています): http://jquerymobile.com/download/

于 2012-01-12T20:01:54.120 に答える