Question

我正在编写一个简单的tampermonkey脚本，它将为商店中的商品获取一些额外的信息。我决定在文档加载时使用.each（），它工作正常。

现在，当我看到页面可以更改（某些项目可以删除，某些项目可以添加）时，新创建的项目不包含其他信息......

$(document).on("load",".item",function( event ) {
    $(this).html($(this).html() + "OK");
});

之前：

$(".item").each(function( event ) {
    $(this).html($(this).html() + "OK");
});

它工作正常。

感谢您的帮助！

Answer 1

我相信你需要变异观察者，你需要以下代码的组合：

这个用于加载

$(document).ready(function( event ) {
   $(".item").each(function( event ) {
    $(this).html($(this).html() + "OK");
    });
});

并且这个将在＃34; .item＆＃34;

上捕获dom上的所有更改

var target = $( ".item" );
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
   var newNodes = mutation.addedNodes; // DOM NodeList
if( newNodes !== null ) { // If there are new nodes added

    //alert('some thing has been changed');
      $(".item").each(function( event ) {
          $(this).html($(this).html() + "OK");
      });

      }
   });    
});

// Configuration of the observer:
var config = { 
attributes: true, 
childList: true, 
characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);
// Later, you can stop observing
//observer.disconnect();

Answer 2

使用jquery创建在页面加载后运行的函数就像$(function(){ your code here })一样简单。这应该这样做：

$(function(){
  $(".item").each(function( event ) {
    $(this).html($(this).html() + "OK");
  });
});

您也可以通过这种方式简化您的jQuery：

$(function(){
  $(".item").append('OK');
});

请参阅http://jsfiddle.net/jh1bvux2/

.on加载jquery不触发

2 个答案: