时间戳

首页 > 解决方案 > 如何使用 MutationObserver 检测 div 值（Django 渲染）变化

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

问题描述

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

标签： htmldjangorendermutation

解决方案

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

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

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

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

推荐阅读