Question

有没有没有MutationObserver的方法来监听replaceWith事件？因为MutationObserver太复杂了

我想听这个：

jQuery( "#elementx" ).replaceWith( "<div id='elementx'><h2>New heading</h2></div>" );

我已经尝试过并且不起作用：

jQuery(document).on('change remove detach','#elementx', {} ,function(e){
    alert('elementx changed');
})

Answer 1

不要害怕使用MutationObserver，出于这些目的，这很简单：

LineNumber

console.log('start script');
setTimeout(
  () => $("#elementx").replaceWith("<div id='elementx'><h2>New heading</h2></div>"),
  1000
);
const elementx = $("#elementx")[0];
new MutationObserver(() => {
  if (!elementx.parentElement) {
    console.log('elementx changed');
  }
}).observe(elementx.parentElement, { childList: true });

其他（可能更糟）的选择是猴子补丁<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="elementx">orig elementx</div> </div>：

.replaceWith

const { replaceWith } = $.fn;
$.fn.replaceWith = function(...args) {
  if (this.is('#elementx')) {
    console.log('elementx changed');
  }
  return replaceWith.apply(this, args);
}

console.log('start script');
setTimeout(
  () => $("#elementx").replaceWith("<div id='elementx'><h2>New heading</h2></div>"),
  1000
);

或者使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="elementx">orig elementx</div> </div>：

DOMNodeRemoved

document.addEventListener('DOMNodeRemoved', ({ target }) => {
  if (target.id === 'elementx') {
    console.log('elementx removed');
  }
});

console.log('start script');
setTimeout(
  () => $("#elementx").replaceWith("<div id='elementx'><h2>New heading</h2></div>"),
  1000
);

如果这是针对站点 you 控件的，那么这是一件很奇怪的事情-最好使用其他方法，例如在调用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="elementx">orig elementx</div> </div>之后，手动调用函数replaceWith。

如何为replaceWith（）设置事件监听器？

1 个答案: