在无限滚动期间再次初始化后多次触发 ADDEventListener 点击函数

Question

这是我的第一个问题，所以我尝试尽可能准确地描述它并遵循 stackoverflow 指南“我如何提出一个好问题？”

我的问题：

我正在使用“旧但黄金”infinite-scroll jQuery 插件来加载 wordpress 网站上的下一篇文章。我还使用lazyframe 插件通过单击视频的播放按钮来“懒惰”地加载 youtube 视频。为了在使用无限滚动功能加载一组新帖子后确保lazyframe功能，我通过将lazyframe('.lazyframe');初始化代码添加到无限滚动js的function(newElements)部分来初始化lazyframe：

    //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 插件会创建多个 youtube iframe。

到目前为止，我的研究表明，事件多次触发的原因是，事件多次附加到元素。以下代码显示了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 的包括在内。

最接近您在 jQuery 中寻找的内容是使用 on()。 所以你可以把你的代码改成这个（事件）：

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

off() 函数删除您指定的元素上的事件侦听器（在我们的例子中为“点击”），因此您可以尝试此解决方案。