jQuery scroll()重复执行致按钮重复添加问题求助

你的核心问题是没有针对单个目标元素判断是否已添加按钮，而是用全局存在性判断，导致要么新加载的元素得不到按钮，要么已有元素被重复添加。下面是两种可行的解决方案：

方案一：给已处理元素加标记类 #

通过给已经添加过按钮的<a><span>添加专属类，后续滚动时只处理未标记的元素：

$(window).scroll(function () {
  // 筛选出还没添加过按钮的 a>span 元素
  $("a > span:not(.has-attached-btn)")
    .after('<button type="button" class="btn btn-secondary btn-sm">BUTTON</button>')
    .addClass("has-attached-btn"); // 添加标记，避免重复处理
});

方案二：直接检查相邻元素 #

针对每个<a><span>，检查它的下一个兄弟元素是否是目标按钮，仅当不存在时添加：

$(window).scroll(function () {
  $("a > span").each(function() {
    // 验证当前 span 的下一个元素是否是我们要加的按钮
    if (!$(this).next(".btn.btn-secondary.btn-sm").length) {
      $(this).after('<button type="button" class="btn btn-secondary btn-sm">BUTTON</button>');
    }
  });
});

原代码问题说明 #

你原来的if (!$("a span button").length)是全局判断——只要页面上存在任何一个符合条件的按钮，就停止给所有元素添加。但滚动加载新内容后，新的<a><span>没有按钮，却因为全局已有按钮而得不到处理；反过来，如果页面一开始没有按钮，第一次滚动会给所有<a><span>加按钮，但后续滚动可能因为判断逻辑失效（比如某些场景下按钮被移除）导致重复添加。

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