自定义 JS 仅适用于分页项目的第一页答案

【问题标题】：Custom JS only working on the first page of Paginated items自定义 JS 仅适用于分页项目的第一页
【发布时间】：2021-04-22 15:05:01
【问题描述】：

我正在使用 Waypoints Infinite Scroll 来渲染帖子。使用 JS，我在“DOMContentLoaded”的删除按钮上添加了一个事件侦听器。这一切在第一页上都可以正常工作，但在后续页面上却不行。这可能是因为 'DOMContentLoaded' 事件没有被重新触发吗？

我试过document.onreadystatechange，结果还是一样。

这里我正在监听分页链接何时被触发并且这不起作用并且是重复的。

document.addEventListener("DOMContentLoaded", () => {

  // Delete buttons
  let delete_btns = document.querySelectorAll(".delete_btn");
  delete_btns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      handleDeleteClick(e.target.id);
    });
  });

  // Infinite Scroll link
  let scroll_link = document.querySelector(".infinite-more-link");
  scroll_link.addEventListener("click", () => {
    delete_btns.forEach((btn) => {
      btn.addEventListener("click", (e) => {
        handleDeleteClick(e.target.id);
      });
    });
  });
});

有没有我可以监听的替代事件？

【问题讨论】：

标签： javascript pagination infinite-scroll jquery-waypoints

【解决方案1】：

您应该在页面更改后获得 new delete_btns（使用 document.querySelectorAll(".delete_btn")）。类似的东西：

var infinite = new Waypoint.Infinite({
            onAfterPageLoad: function() {
               let delete_btns = document.querySelectorAll(".delete_btn");
               delete_btns.forEach((btn) => {
                    btn.addEventListener("click", (e) => {
                    handleDeleteClick(e.target.id);
                    });
                }); 
            }
        })

【讨论】：