0

無限スクロール サイトをモバイル デバイスに移植しようとしています。AJAX スクロールを無効にして、AJAX の「その他」ボタンに置​​き換えます。最初のクリック イベントを「その他」ボタンの後続のインスタンスにバインドする方法を理解するのに問題があります。

私はまだプログラミングに慣れていませんが、何かを 2 回行うと間違っていることを十分に理解しています。.on() 内のイベントを「more」の各インスタンスにバインドして、ページに動的に追加するにはどうすればよいですか?

JS:

$('.more-link').on('click', function(){

    var url = $(this).attr('href');        
    $(this).removeAttr('href');
    $(this).remove();

    $.get(url, function(data) {
        $('.infinite-container').append(data);

        // Callback for .on()
        }).done(function (){

        // Add visibility for "more" buttons 
        $('.more-link').css({'visibility': 'visible'});  

        // Here's where I'm repeating myself       
        $('.more-link').on('click', function(){

            var url = $(this).attr('href');
            $(this).removeAttr('href');
            $(this).remove();

            $.get(url, function(data) {
                $('.infinite-container').append(data);
            })
        });

    });
});

洞察と効率性をいただければ幸いです。

編集:「その他」のリンクは、data各呼び出しでコンテナーの末尾に追加されたものの一部であることを追加する必要があります。私が現在セットアップしている方法では、3 回目の呼び出しで機能が壊れます。

4

1 に答える 1

0

理解した。JQuery の .on() には、後で動的に追加されるターゲット要素の入札を可能にする追加のパラメーターがあります。この場合、親要素 ( などdocument) 内の特定のセレクターにバインドを追加すると、タスクが達成されます。

$(element).on('event', 'selector', function(event) {...});

したがって、質問の例では、コードは次のようになります。

$(document).on('click', '.more-link', function(){..stuff..});
于 2013-05-01T22:07:44.633 に答える