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

问题描述

我正在使用 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);
      });
    });
  });
});

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

解决方法

您应该在页面更改后获得 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);
                    });
                }); 
            }
        })