Question

这是我的第一个问题，因此我尝试尽可能准确地描述它并遵循stackoverflow指南＆＃34;我如何提出一个好问题？＆＃34;

我的问题：

我正在使用＆＃34; old而不是gold＆＃34; infinite-scroll jQuery插件，用于加载wordpress网站上的下一篇文章。我还使用lazyframe插件加载youtube视频＆＃34;懒惰＆＃34;点击视频的播放按钮。为了在使用infinte滚动函数加载一组新帖子后确保延迟帧功能，我通过将lazyframe('.lazyframe');初始化代码添加到无限滚动js的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插件有时会创建多个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

您在eventListener中使用事件捕获。实际上，并非所有浏览器都支持事件捕获（例如，不低于9的Internet Explorer版本）但是所有浏览器都支持事件冒泡，这就是为什么它是用于将处理程序绑定到所有跨浏览器抽象中的事件的阶段的原因，jQuery包括在内。

最接近你在jQuery中寻找的是使用on（）。因此，您可以将代码更改为此（事件）：

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

off（）函数删除您指定的元素上的事件侦听器（在我们的例子中是单击＆＃39;），因此您可以尝试此解决方案。

Answer 2

插件作者在这里。谢谢你使用它！

插件中存在一个错误，在重新初始化时会在元素/元素上附加多个事件侦听器。这是在v1.1.1中排序的，所以只需更新插件即可。

在无限滚动期间再次初始化后，EventListener单击函数多次触发

2 个答案: