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

Question

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

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

我在这里监听分页 link 何时被触发，但它不起作用并且是重复的。

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);
      });
    });
  });
});

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

Answer 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);
                    });
                }); 
            }
        })

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

Custom JS only working on the first page of Paginated items

javascript

pagination

infinite-scroll

jquery-waypoints