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

【问题标题】：how to detect div value (Django rendered) change with MutationObserver如何使用 MutationObserver 检测 div 值（Django 渲染）变化
【发布时间】：2018-12-24 07:58:08
【问题描述】：

我正在将一个值从 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 值的帮助

【问题讨论】：

标签： html django render mutation

【解决方案1】：

终于知道原因了。希望这对以后遇到类似问题的人有所帮助。

所以，基本上我是使用我的 Django 表单提交按钮一次执行两个操作： 1. 向视图提交数据，对视图中的数据进行处理； 2.通过点击动作触发另一个功能阿贾克斯。

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

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

【讨论】：