当更多内容加载到页面上时如何触发函数，例如tumblr和无限滚动

Question

嗨，我正在写一个Google chrome扩展程序，它可以为项目重新设计tumblr，

我试图摆脱笔记数量之后的“笔记”。

到目前为止，我已经使用了它，除了tumblr在您向下滚动时会加载更多帖子，而这些帖子不会受到影响...：/

每当有更多帖子被加载时，我将如何触发此功能？

$('.note_link_current').each( function(index) {
  // Inside this function, "this" refers to the (DOM) element selected
  var text = $(this).text();
  /* ... */
});

任何帮助，将不胜感激...

Answer 1

您想要的是对插入到按类过滤的DOM中的每个节点上运行一些代码。

现代的方法是使用DOM MutationObserver。 这是一个规范的答案 ，并且是有关它的很好的文档 。

简而言之，这是您应该执行的操作：

function handleNote(element){
  var text = $(element).text();
  /* ... */
}

// Initial replacement
$('.note_link_current').each( function(index) { handleNote(this); });

var observer = new MutationObserver( function (mutations) {
  mutations.forEach( function (mutation) {
    // Here, added nodes for each mutation event are in mutation.addedNodes
    $(mutation.addedNodes).filter('.note_link_current').each(
      function(index) { handleNote(this); }
    );
  });
});

// Watch for all subtree modifications to catch new nodes
observer.observe(document, { subtree: true, childList: true });