Waypoint无限滚动加载新数据后星级评分不显示问题求解

问题根源：你初始页面加载时调用的$.fn.stars()方法只会处理当时已存在于DOM中的.stars元素，Waypoint无限滚动动态插入的新DOM节点不会被自动扫描触发渲染，和font-awesome样式的加载位置无关。

你只需要在Waypoint.Infinite的初始化配置中添加onAfterPageLoad回调，在回调中针对新加载的内容单独调用星级渲染方法即可，完整代码如下：

// 替换你原有Waypoint.Infinite初始化逻辑即可
const infiniteScroll = new Waypoint.Infinite({
  // 下面三个参数保持和你现有配置一致即可，不用修改
  element: document.querySelector('.infinite-container'), // 无限滚动容器的DOM节点
  more: '.infinite-more-link', // 下一页加载链接的选择器
  items: '.infinite-item', // 单条评分项的选择器
  // 新增以下回调逻辑即可
  onAfterPageLoad: function ($newContent) {
    // 仅在新加载的页面片段中查找.stars元素，调用星级渲染方法
    $newContent.find('.stars').stars();
  }
});

注意事项 #

• 确保$.fn.stars()方法的定义在这段初始化代码之前，避免出现方法未定义的报错
• 不要把$newContent.find('.stars')替换为全局选择器$('.stars')，后者会选中页面所有已存在的星级元素，导致重复渲染、样式异常
• 你之前尝试的将font-awesome样式移入.infinite-item的操作可以回退，对解决该问题没有作用

内容的提问来源于stack exchange，提问作者Thierno Amadou Sow