如何使用MutationObserver检测div值（由Django渲染）的变化

Question

我正在渲染从Django后端到前端的值，并且试图通过MutationObserver检测div值的变化。 下面是我当前的代码：MutationObserver部分：

window.addEventListener('load', function () {
          var element = document.getElementById('myTaskList');

          var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
          var observer = new MutationObserver(myFunction);
          observer.observe(element, {
            childList: true
          });

          function myFunction() {

            console.log("this is a trial")
            console.log(element);
            console.log(element.innerHTML);
          }

          // setTimeout(function(){
          //   element.innerHTML = 'Hello World!';
          // }, 1000);
          //
          // setTimeout(function(){
          //   element.innerHTML = 'Hello Space!';
          // }, 2000);
        });

html部分：

<div hidden id="myTaskList">{{resultList | safe}}</div>

我正在将字符串“ dummyValue”呈现给div，但只是看不到函数内部console.log（）语句中的值。

但是，当我取消注释setTimeout函数时，此方法效果很好。

感谢您对MutationObserver为什么无法检测渲染的div值的任何帮助

Answer 1

我终于弄清楚了原因。 希望这对将来遇到类似问题的人有所帮助。

因此，基本上，我是使用Django表单提交按钮一次执行两个操作：1.将数据提交到视图并在视图中处理数据； 2.通过Ajax的点击动作触发另一个功能。

第二个动作被第一个动作阻止，我只能从动作1中获得结果。

我的解决方案：我将操作1修改为也使用Ajax。 如上所述，我最初使用Django表单提交数据。 我在动作1的成功功能内触发了动作2。现在一切正常。