jquery scroll() 执行多次

Question

我正在使用 jQuery 在页面上找到的所有 A>SPAN 标签旁边添加一个按钮。 页面本身随着用户向下滚动而增长，这就是我使用 Scroll function 的原因 - 我需要不断地将按钮添加到新的页面部分。

下面的代码不断地将按钮添加到已经有按钮的部分。 我试图在每个找到的标签组合旁边只显示一个按钮。 我已经尝试了所有我能想到的组合。 我希望有人有一个我可以尝试的简单解决方案。

谢谢你。

$(window).scroll(function () {
  if (!$("a span button").length) {
    $("a span").after(
      ' <button type="button" class="btn btn-secondary btn-sm">BUTTON</button>'
    );
  }
});

Answer 1

jQuery 的.after()插入同级元素，而不是后代。 例如，如果你有

<a>
  <span>Text</span>
</a>

你的代码的结果是

<a>
  <span>Text</span>
  <button>BUTTON</button>
</a>

这与您的选择器"a span button"不匹配，因为<button>不是<span>的后代。

我会改为向<span>添加一些属性或 class 以识别它已被button-ised ，然后您可以在选择中省略这些元素

$(window).scroll(() => {
  $("a span:not(.buttonised)").each((_, span) => {
    $(span)
      .addClass("buttonised")
      .after(
        $("<button>", {
          class: "btn btn-secondary btn-sm",
          text: "BUTTON",
          type: "button",
        })
      );
  });
});