Функция щелчка EventListener срабатывает несколько раз после повторной инициализации во время бесконечного прокрутки

Question

Это мой первый вопрос, поэтому я стараюсь описать его как можно точнее и следую инструкциям stackoverflow «Как задать хороший вопрос?».

Моя проблема:

Im используя «старый, но золото» infinite-scroll JQuery плагин для загрузки следующих должностей на WordPress сайте. Im также использует плагин lazyframe, чтобы загружать видео youtube «ленивыми» с нажатием кнопки воспроизведения видео. Для обеспечения функции lazyframe после загрузки набора новых сообщений с функцией infinte прокрутки, им инициализации lazyframe следующим образом с добавлением lazyframe('.lazyframe'); инициализации кода в function(newElements) части бесконечной прокрутки ЯШ:

//infinite scroll 
    if ($masonry.length && obj_testsite.infinitescroll != 'disable') { 
    nextSelector = obj_testsite.nextselector; 
    if (document.URL.indexOf('/source/') != -1) { 
     nextSelector = '#navigation #navigation-next a'; 
    } 

    $masonry.infinitescroll({ 
     navSelector : '#navigation', 
     nextSelector : nextSelector, 
     itemSelector : '.thumb', 
     prefill: true, 
     bufferPx : 500, 
     loading: { 
      msgText: '', // load spinner icon instead of gif images - see below 
      finishedMsg: obj_testsite.__allitemsloaded, 
      img: '', 
      finished: function() {} 
     } 
    }, function(newElements) { 

      lazyframe('.lazyframe'); 

      var $newElems = $(newElements); 
      $('#infscr-loading').fadeOut('normal'); 
      $masonry.masonry('appended', $newElems, true);         
    }); 
} 

Пока это работает нормально. НО, когда я прокручиваю вниз и загружаю несколько наборов сообщений с бесконечным прокруткой, а затем нажмите кнопку воспроизведения, иногда плагин lazyframe создает несколько iframe ioutube.

Мои исследования пока показали мне, что причина, по которой событие срабатывает несколько раз, заключается в том, что событие привязано к элементу несколько раз. Следующий код показывает часть, где lazyframe плагин использует функцию addEventListener целевой элемент в документе:

  function n(e) { 
      if (e instanceof HTMLElement != !1) { 
       var t = { 
        el: e, 
        settings: i(e) 
       }; 
       t.el.addEventListener("click", function() { 
        return t.el.appendChild(t.iframe) 
       }), d.videolazyload ? l(t) : s(t, !!t.settings.thumbnail) 
      } 
     } 

Любая идея, как решить эту проблему? Я пытался остановить распространение событий, но я не смог исправить это из-за недостатка знаний. Любая помощь будет оценена по достоинству.

Answer 1

Автор плагина здесь. Спасибо за использование!

В плагине произошла ошибка, которая будет прикреплять к элементу/элементам несколько повторений событий при повторной инициализации. Это отсортировано в v1.1.1, поэтому просто обновите плагин, и он должен работать.

Answer 2

Вы используете захват событий в своем eventListener. На самом деле, не все браузеры поддерживают захват событий (например, версии Internet Explorer меньше 9, а не все), но все поддерживают буферизацию событий, поэтому это фаза, используемая для привязки обработчиков к событиям во всех абстракциях между браузерами, jQuery's включен.

Ближайший к тому, что вы ищете в jQuery, используется on(). Таким образом, вы можете изменить свой код для этого (события):

$(t.el).off('click').on('click', function() { 
        return t.el.appendChild(t.iframe) 
       }); 

выключен() функция удаления слушателя событий (в нашем случае «щелчок») на элементе, который вы указали, так что вы можете попробовать это решение.