0

ajaxを使用した無限スクロールプラグインを使用しています。

「次のページ」が ajax を介してロードされると、次のページにある他のすべての ajax 関連スクリプトは機能しません。「委任されたイベント」を使用する必要があると言われました（つまり、に変更$(id).click()し$(document).onます）-問題は、複数のプラグインを編集し、多数の関数呼び出しを変更することです。

すべてを変更$(document).onせずに無限スクロールでクールなことをする方法はありますか?????

私は、他の ajax 関連のプラグインを変更して適合させるよりも、無限スクロール プラグインを変更したいと考えています。

4

4 に答える 4

4

残念ながら、ここではオプションがほとんどなく、デリゲート イベントへの切り替えが最も優れています。

問題は、古いコードが「特定の種類のアクション」に対してページ全体の応答を作成する必要があるときに、「特定の要素」に動作を割り当てていたことです。

3 つの可能性が見えますが、そのうちの 1 つだけが動作することが保証されています。

  1. 新しいページが読み込まれるたびに、新しいページで必要なスクリプトを実行します。ここでの欠点は、コンテンツのロード間の「ティアダウン」にも注意しないと、動作が繰り返されたり、互いに衝突したりすることです (例: 二重ポップアップ、壊れたアニメーション)。
  2. 動的領域を<iframe>s にカプセル化します。アーキテクチャによっては、これが可能な場合と不可能な場合があり、特定のページ構造を既に想定しているある種の無限スクロール プラグインと統合するのは確かに簡単ではありません。
  3. 弾丸を噛んで、くだらないコードを修正してください。
于 2013-09-15T01:34:41.387 に答える
1

とにかく、ajax で読み込まれたコンテンツ内にスクリプトを読み込むのは、まずまずの方法です。必要なのはevent delegation、動的に追加された要素にアタッチすることです。

$("body").on("click", ".yourclass", function() {
    //This function will run for every element with `yourclass` class you load via ajax
});
于 2013-09-15T01:39:14.363 に答える
0

イベント委任は正しい解決策です。問題は、ページがロードされたときに「次のページ」の HTML 要素が DOM の一部ではなかったことです。したがって、次のようなことをした場合：

$(function() {
    $('#some-element-on-the-next-page').click(function() {
        foo();
    }); 
});

ハンドラーはバインドしませんでした。

イベントを $(document) に添付しません。DOM のロード時に使用できる最も近い親にそれらをアタッチします。たとえば、body タグまたは body の最初の子である固定幅ラッパー (レイアウトでこのタイプの構造が使用されていると仮定します)。

アタッチする要素が .empty() で空にされたり、.html() で再作成されたりしないようにしてください。バインディングが壊れます。メソッドを起動するためにイベントがドキュメント ノードまでバブリングする必要がないため、委任されたハンドラーを DOM ツリーの下位にアタッチすると、パフォーマンスが向上します。

すべての関数とプラグインを書き直す必要はなく、それらを起動するイベントへのバインディングだけを書き直す必要があります。
通常、モジュール パターンを使用し、メソッド定義をクリック ハンドラーから切り離します。私のメソッドはすべて外側のクロージャで定義されています。クリックなどのユーザー イベントをバインドする「ドキュメント準備完了」セクションを作成します。

例えば：

var myModule = (function() {

    var public = {};

    public.foo = function() {
        // do something cool here
    };


    // document ready
    $(function () {

        $('#site-container').on('click', '.js-foo', function() {
            public.foo();
         });

    });


    return public;   

})();

将来バインディングを変更する必要がある場合は、ドキュメント準備セクション内の呼び出しのみを変更する必要があります。

于 2013-09-15T02:02:05.480 に答える
0

.click() を使用し続ける必要がある場合は、ページにコンテンツを追加するたびに新しいコンテンツを呼び出してイベントを再フックできる関数が必要です。

e: ただし、.click から .on への変更は、適切に構造化された検索/置換によって処理できることが多いことに注意してください。

于 2013-09-15T01:33:28.687 に答える