变异观察者生产无限循环

Question

我正在编写一个函数，使用带有 jQ​​uery 的突变观察器来注册对 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 是否已经在其中包含 moreInfoURL，如果已经存在则忽略