尽管 DOM 发生了突变，MutationObserver 仍无法可靠响应

问题描述

在 wordpress 页面中，我使用 3rd 方短代码来呈现选择加入表单。在我的模板中，我想使用一些 jQuery 来操作这个表单。由于外部 HTML 代码在 document.ready() 上尚不可用，我需要使用 MutationObserver API 检测 DOM 更改。

然而，观察者并不能可靠地检测到外部脚本引起的 DOM 变化。更糟糕的是，每次我重新加载页面时，观察者对象实际检测到的内容都会有所不同。在最新的 Firefox 和最新的 Chromium 中甚至有所不同。而 Firefox 控制台输出是

Mutation: attributes`

Chromium 控制台有时什么都不说，在重新加载 3 到 5 次后（注意：浏览器工具中的“禁用缓存”选项已激活）它说：

Mutation: childList`

我做错了什么？

这是 HTML 源代码，当页面在 document.ready() 上呈现时，如浏览器所示：

<div id="target">
  <script async data-uid="ab1a377df0" src="https://somedomainö.com/ab1a377df0/index.js"></script>
</div>

这是脚本注入的 HTML（仅在浏览器工具中可见。在 HTML 源代码中不可见。

<div id="target">
  <form id="some-id" action="https://someotherdomain.com/script.xy">
    <input name="field1" type="text">
    <input type="submit" id="submit-id" name="Submit it">
  </form>
</div>

这是 JS/jQuery 代码：

app = jQuery( document ).ready( function(){

 const observer = new MutationObserver( function( mutations ){
       
       mutations.forEach( function( mutation ){
         console.log( 'Mutation: ' + mutation.type );
       } );
      observer.observe( jQuery( '#target' )[0],{attributes: true,childList: true,subtree: true } );

} );

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript jquery mutation-observers