为Infinite Scroll添加回调函数失效问题求助

我正在使用Infinite Scroll插件，基础功能正常，但无限滚动加载的元素关联的jQuery功能在第二页后无法生效。尝试添加官方文档的append.infiniteScroll回调但没成功，相关代码如下，求排查问题，期望新加载元素的图片懒加载等功能正常触发。

官方示例回调代码：

//  Triggered after item elements have been appended to the container.
$container.on( 'append.infiniteScroll', function( event, body, path, items, response ) {
  console.log(`Appended ${items.length} items on ${path}`);
});

我的Infinite Scroll初始化代码：

$('.masonry-container').infiniteScroll({
  path: '.pagination__next',
  append: '.masonry-item',
  history: 'replace',
  status: '.page-load-status',
});

需要调用的jQuery函数：

// EDIT by comment @freedomn-m
$(function PIN() {
  $(document).on("click", ".showImage", function() {
    $('.pin-card').not('#pin' + $(this).attr('target')).hide();    
    $('#pin' + $(this).attr('target')).toggle();
  });

  $('.close').click(function() {
    $('.pin-card').not('#pin' + $(this).attr('target')).hide();
  });
});

核心问题 #

你的代码里，.close的点击事件是直接绑定在元素上的（$('.close').click(...)），这种方式只能给页面初始化时已存在的元素绑定事件，新加载的.close元素不会自动继承这个事件绑定。而.showImage用了事件委托（$(document).on("click", ".showImage", ...)），所以它能正常工作。

另外，你没有正确实现append.infiniteScroll回调来处理新加载元素的初始化逻辑（比如图片懒加载）。

修复步骤 #

1. 统一使用事件委托处理点击事件
   把.close的点击事件改成事件委托形式，绑定在document或更接近的父容器上：

$(document).on("click", ".close", function() {
  $('.pin-card').not('#pin' + $(this).attr('target')).hide();
});

2. 正确添加Infinite Scroll的append回调
   在初始化Infinite Scroll后，绑定append.infiniteScroll事件，在回调里处理新加载元素的逻辑（比如触发图片懒加载、重新初始化需要的功能）：

$('.masonry-container').infiniteScroll({
  path: '.pagination__next',
  append: '.masonry-item',
  history: 'replace',
  status: '.page-load-status',
}).on('append.infiniteScroll', function(event, body, path, items) {
  // 这里处理新加载元素的初始化逻辑
  // 比如如果用了图片懒加载插件，可以在这里调用它的刷新方法，示例：
  // $lazyLoadInstance.update();
  
  // 确认回调触发，可以先加日志测试
  console.log(`已加载 ${items.length} 个新元素`);
});

完整修正后的代码示例 #

// 页面初始化时绑定事件（全用事件委托）
$(function() {
  $(document).on("click", ".showImage", function() {
    $('.pin-card').not('#pin' + $(this).attr('target')).hide();    
    $('#pin' + $(this).attr('target')).toggle();
  });

  $(document).on("click", ".close", function() {
    $('.pin-card').not('#pin' + $(this).attr('target')).hide();
  });
});

// 初始化Infinite Scroll并绑定append回调
$('.masonry-container').infiniteScroll({
  path: '.pagination__next',
  append: '.masonry-item',
  history: 'replace',
  status: '.page-load-status',
}).on('append.infiniteScroll', function(event, body, path, items) {
  // 在这里执行新加载元素的初始化逻辑，比如图片懒加载的刷新
  // 示例：如果用了lozad.js，就调用 lozad().observe();
  // 如果是其他懒加载插件，参考对应文档的刷新方法
});

关键说明 #

• 事件委托的核心是把事件绑定到已存在的父元素上，通过事件冒泡机制处理子元素的事件，不管子元素是初始化时就有还是后来动态加载的。
• append.infiniteScroll回调会在新元素被添加到容器后触发，是处理动态加载元素初始化的最佳时机，比如图片懒加载、插件重新初始化等都应该放在这里执行。

内容的提问来源于stack exchange，提问作者Dlopezros