创建全局函数

Question

我使用了一些jQuery和无限滚动，通过无限滚动引入的一些新内容使用了一些简单的jQuery来实现悬停效果等。

$(".grid-landing-page a").hover(function () {
$(this).children('.preview-project-title').toggleClass("preview-project-title-on");
});

我需要将其添加到无限滚动的回调中，就像我已经使用的砖石一样：

function( newElements ) {
    var $newElems = $( newElements );
    $('.grid-landing-page-container').masonry( 'appended', $newElems );
}

我很想知道把toggleClass代码变成一个全局变量是否是个好主意，这样我就可以在无限滚动的newElements中调用它了。如果是的话，我该怎么做有什么帮助吗？或者，如果有更好的方法，我们将不胜感激。

谢谢，R

Answer 1

尽可能避免全局变量。在您的情况下，活动委派是一个更好的选择。如果你是新手，这个想法是：

与其将事件直接绑定到您感兴趣的元素，不如将一个事件绑定到一个相互容器，然后检查是哪个元素真正触发了它。这在涉及许多元素的情况下具有明显的性能优势。

$("body").on('hover', '.grid-landing-page a', function () {
    $(this).children('.preview-project-title').toggleClass("preview-project-title-on");
});

你可能更喜欢把我对容器（主体）的选择改成更具体的。

在幕后发生的事情是，从技术上讲，每次鼠标悬停在鼠标身上时，事件都会触发——但在事件被认为是由匹配.grid-langing-page a的元素启动之前，jQuery不会触发其回调代码。

因为这个上下文检查是在事件触发点而不是在事件绑定点（您的原始代码）完成的，所以它可以处理当前和未来的匹配元素。无需重新绑定