如何使jQuery代码对懒加载动态加载的帖子生效？

你的问题核心在于初始代码只在页面加载时执行一次，仅对当时存在的.main元素生效，懒加载新增的帖子没有被处理。我们可以通过封装复用函数+事件委托来解决这个问题，让逻辑覆盖所有现有和未来添加的帖子。

第一步：封装处理逻辑为可复用函数 #

把原来的初始化逻辑抽成独立函数，这样不管是页面初始加载还是懒加载完成后，都能调用它处理新的.main元素：

// 封装处理每个.main容器的函数
function processPostContainers() {
  const certainAmount = 5;
  $('.main').each(function(){
    const $this = $(this);
    // 只处理未初始化过的容器（避免重复添加按钮、重复执行逻辑）
    if (!$this.data('initialized')) {
      const childCount = $this.children().length;
      if (childCount > certainAmount - 1) {
        // 统一设置图片样式
        $this.find('img').css({
          'display': 'block',
          'float': 'left'
        });
        // 隐藏第N个之后的图片（注意:nth-child从1开始计数）
        $this.find(`img:nth-child(${certainAmount + 1})`).nextAll().css('display', 'none');
        // 添加"查看更多"按钮
        $this.append('<a class="show-more">See More</a>');
      }
      // 标记该容器已初始化
      $this.data('initialized', true);
    }
  });
}

第二步：用事件委托处理动态按钮的点击 #

直接绑定click事件只能作用于页面加载时已存在的元素，我们用事件委托绑定到静态父级（比如document），这样动态添加的.show-more按钮也能正常响应：

// 事件委托处理"查看更多"按钮点击
$(document).on('click', '.show-more', function() {
  const $button = $(this);
  const $container = $button.closest('.main');
  // 显示所有图片
  $container.find('img').css('display', 'block');
  // 切换按钮文案和样式类，支持收起功能
  $button.text('See Less').toggleClass('show-more show-less');
});

// 处理"收起"按钮的点击逻辑
$(document).on('click', '.show-less', function() {
  const certainAmount = 5;
  const $button = $(this);
  const $container = $button.closest('.main');
  // 隐藏超出数量的图片
  $container.find(`img:nth-child(${certainAmount + 1})`).nextAll().css('display', 'none');
  // 切换回原状态
  $button.text('See More').toggleClass('show-more show-less');
});

第三步：在正确时机调用函数 #

1. 页面初始加载时：

$(document).ready(function() {
  // 处理页面一开始加载的6个帖子
  processPostContainers();
});

2. 懒加载完成后：
   在你的懒加载逻辑中，当新帖子插入到DOM后，立即调用处理函数：

// 假设这是你的懒加载回调函数
function lazyLoadPosts() {
  // 这里是你的懒加载请求、DOM插入逻辑
  // ...
  // 新帖子加载完成后，调用处理函数
  processPostContainers();
}

关键改进点说明 #

• 用$this.data('initialized', true)标记已处理的容器，避免重复操作；
• 事件委托确保动态生成的按钮能触发交互逻辑；
• 封装函数让代码更易维护，可在多个场景重复调用。

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