0

背景: Swipe.js と Infinite Ajax Scroll (JQ) の両方を利用してポートフォリオ サイトを作成しています。

問題: 余分なページのコンテンツが現在のページに読み込まれると、既に読み込まれている Swipe.js スクリプトによって処理されません。これは、新しいコンテンツのマークアップが変更されていないことを意味します (スワイプ機能が機能するために必要です)。

ページが再ロードされるたびに Swipe.js スクリプトを起動する必要があると思います。それはそれを修正しますか？私が8歳のように私にこれを説明してください. JSは強いスーツではありません...

デモ: http://hatchcreative.co.nz/tomo

ページに新しいコンテンツが読み込まれると、スライダーの両側のボタンが機能しなくなることがわかります。

4

1 に答える 1

0

はい、その通りです。画像が読み込まれた後、これらの新しい要素に新しいスワイプインスタンスを作成する必要があります（ページが読み込まれたときに最初は存在していなかったため）。
無限スクロールのドキュメントに基づいて、を使用できますonRenderComplete。

したがって、次のjQuery.iasようなコンストラクタがあります。

jQuery.ias({
  // ... your settings...
  onRenderComplete: function(items) {
    $(items).each(function(index, element) {
      new Swipe(element);
    });
  }
});

これはどういうわけかこのように機能するはずですが、私は正確にはわかりません。私はまだこれらのライブラリを使用していません。

編集：
コードをさらに調べた後、次のようなインラインクリックハンドラーがあることがわかりましたonclick='two.prev();return false;'。

これを削除して、同じ関数onclickにハンドルを追加する必要があります。onRenderComplete

onRenderComplete: function(items) {
  var swipe;
  $(items).each(function(index, element) {
    swipe = new Swipe(element);
  });

  // find tags with the class 'forward' inside the current element and add the handler
  $(element).find('.forward').on('click', function() {
     swipe.next();
  });
  // ... also for previous
}

ちなみに、通常はjsFiddleに重要なコード部分を提供する必要があります。そうすれば、問題が発生しやすくなり、リンクされたページが変更されても問題が陳腐化することはありません。

于 2013-02-15T22:27:48.377 に答える