3

ページコンテンツをロードするために、無限スクロールプラグインhttp://www.infinite-scroll.com/infinite-scroll-jquery-plugin/を使用しています。

次のようなjQueryイベントリスナーがあります。

$('.like-action').on('click',
    function(event){
      likeComment($(this)); 
      event.preventDefault();
});

それはにロードされ$(document).readyます。ただし、新しいコンテンツがイベントとともにロードされるとinfinitescroll、イベントリスナーは新しいコンテンツに適用/使用できなくなります。そこで、infinitescroll（すべてのコンテンツがロードされたときに）のコールバックで呼び出される関数を作成しました。関数：

function afterUpdate(){
$('.like-action').on('click',function(event){
      likeComment($(this)); 
      event.preventDefault();
});}

ただし、最終的に発生するのは、（すでにロードされている）古いコンテンツの場合、。を持つリンクがクリックされたとき.like-action classにlikeComment関数が呼び出されますが、新しいコンテンツがロードされた回数+元のコンテンツ$(document).readyです。

例：コンテンツはページの読み込み時に読み込まれます。リンクはlikeCommentクリック時に1を実行します。下にスクロールして新しいコンテンツをロード（およびコールバック）した後、前と同じリンクをクリックすると、likeCommentが2回実行されます。などなど。

私はここで何が間違っているのですか？

イベントリスナーが正しく書かれていませんか？

DOMページの読み込み時に要素がなかった場合でも、すべての要素に対して自動的に機能するリスナーを作成する方法はありますか？

または、無限スクロールによってロードされたばかりの要素にのみ.onを登録する方法はありますか（したがって、重複はありません）？

4

2 に答える 2

8

の使用法を変更on()してセレクターを渡すと、イベントの委任が使用され、クリックハンドラーが将来のすべての要素に対しても機能するようになります。

$('#someContainer').on('click', '.like-action', function (event){
    likeComment($(this)); 
    event.preventDefault();
});

これにより、クリックハンドラーを再度追加する必要がなくなり、古い要素に複数回追加されるという問題が解決されます。

これは、現在および将来のすべての.like-action要素がの中に含まれることを前提としています#someContainer。

編集：あなたのコメントに応じて、そのようなプラグインの初期化を委任することはできません。あなたができることはこれです：要素を初期化するとき、それにクラスも追加します：

$('.profilecard').hovercard().addClass('initialized');

次に、新しいクラスを初期化する必要がある場合のコールバックで、そのクラスがすでにあるものはすべてスキップします。

function afterUpdate(){ 
    $('.profilecard:not(".initialized")').hovercard();
}
于 2012-10-10T12:47:27.890 に答える
1

誰かがjQueryなしでこれを行うことに興味があるなら、ここに素晴らしい投稿があります-https://elliotekj.com/2016/11/05/jquery-to-pure-js-event-listeners-on-dynamically-created-elements //

基本的な例： 

document.querySelector(staticParent).addEventListener(eventName, function (event) {
  if (event.target.classList.contains(dynamicChildSelector)) {
    // Do something
  }
})

実例：

document.querySelector('.feed').addEventListener('click', function (event) {
  if (event.target.classList.contains('feed-item')) {
    // Do something
  }
})
于 2018-12-26T03:37:22.457 に答える