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才会触发它的回调代码。

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

创建全局功能

1 个答案: