forEach调用在无限滚动场景失效，如何绑定动态加载元素事件？

你的问题核心在于：初始代码仅对页面加载时已存在的.read-more > a元素绑定了点击事件，但无限滚动加载的元素是后续动态插入DOM的，自然没被覆盖到。

解决方法用事件委托，利用DOM的事件冒泡机制，把事件绑定到一个始终存在的父元素上，而非直接绑定到目标元素：

// 推荐绑定到离目标元素最近的静态父容器，比如假设你的无限滚动列表容器是#scroll-container
document.getElementById('scroll-container').addEventListener('click', function(e) {
  // 检查点击的目标是否是.read-more直接子级的a标签
  const targetLink = e.target.closest('.read-more > a');
  if (targetLink) {
    // 这里写你原来点击事件里的逻辑
    e.preventDefault(); // 如果需要阻止a标签默认跳转行为
    // 示例逻辑：比如打印链接地址
    console.log('点击了链接:', targetLink.href);
  }
});

// 如果找不到合适的静态父容器，也可以绑定到document（性能稍差但通用）
// document.addEventListener('click', function(e) {
//   const targetLink = e.target.closest('.read-more > a');
//   if (targetLink) {
//     // 你的逻辑
//   }
// });

原理说明 #

事件委托不需要给每个目标元素单独绑事件，而是监听父元素的点击事件，当点击事件冒泡到父元素时，通过e.target.closest()判断点击的元素是否符合目标选择器——不管这个元素是初始加载的还是后续动态添加的，只要匹配选择器就能触发逻辑。

优化提示 #

• 优先选择离目标元素最近的静态父容器绑定事件，避免事件在整个DOM树中冒泡，减少不必要的性能消耗。
• closest()方法会从当前元素开始向上查找，返回第一个匹配选择器的元素，刚好适配.read-more > a的层级要求。

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