Question

我正在使用带有jQuery的变异观察器编写一个函数来注册对DOM的更改，特别是在添加新节点时我可以更改其内容：

$("SELeCTOR GOOD" ).click(function(){
  var targetNode = $(this).find('.content').get(0);
  var config = { attributes: true, childList: true, subtree: true, attributeOldValue: true };

  // Callback function to execute when mutations are observed
  var callback = function(mutationsList) {
      for(var mutation of mutationsList) {
          if (mutation.type == 'childList') {
              var courses = $(targetNode).find('.courses').get(0);
              $(courses).find('.coursebox.clearfix').each(function( index,item ) {
                var attacherURL = $(item).find('.coursename a').attr('href');
                var moreInfoURL = '<a class="btn btn-outline-primary pull-right" href="'+attacherURL+'">More info</a>';

                var oldHTML = $(item).find('div.moreinfo').html();
                var newHTML = moreInfoURL + oldHTML;
                //this following line is supposed to replace the html, but it creates an infinite loop
                $(item).find('div.moreinfo').html(newHTML);
                //end
              });
          }
          else if (mutation.type == 'attributes') {
              console.log('The ' + mutation.attributeName + ' attribute was modified.');
          }
      }
  };

我也试过追加/前置，但是一切都创造了同样的无限循环。像往常一样，非常感谢任何帮助。

此致

Answer 1

好吧，你的修改会导致另一个突变，导致你再次修改它，导致无限循环。一个简单的解决方案是向元素添加一个类以将其标记为已处理，并忽略已处理的节点（具有该类的节点）。另一个是检查dev.morinfo alreade是否在其中包含moreInfoURL，并忽略它是否已经存在

变异观察者生产无限循环

1 个答案: