Question

考虑以下简单结构

<button type="button">Click</button>
<div class="content"></div>

单击该按钮时，它会触发一个AJAX请求，该请求会将.content与其他div一起填充。是否可以观察.content何时被填充并对其作出反应？

这是我尝试过的，但它似乎没有触发回调函数。

  var target_node = document.querySelector('.content');

  const observer = new MutationObserver(function(){
    console.log('changed');
  })

  observer.observe(target_node, {childList: true, subtree: true});

Answer 1

您的代码正常运作。

以下是一个工作代码段

＆＃13;

var target_node = document.querySelector('.content');

  const observer = new MutationObserver(function(){
    console.log('changed');
  })

  observer.observe(target_node, {childList: true, subtree: true});
  
  function populate() {
    document.querySelector('.content').innerHTML = Math.random()
  }

＆＃13;

<button type="button" onclick="populate()">Click</button>
<div class="content"></div>

＆＃13;

Answer 2

您在哪里设置该代码？可能是target_node为空吗？

此代码有效：

<html>
<head>
    <script type="text/javascript">
        function populateContent() {
            document.getElementById('content').innerHTML = 'content!';
            document.getElementById('content')
        }
        function setObserver() {
                    const target_node = document.querySelector('.content');

          const observer = new MutationObserver(function(){
            console.log('changed');
          })

          observer.observe(target_node, {childList: true, subtree: true});
        }
    </script>
</head>
<body onload="setObserver()">
<button type="button" onclick="populateContent()">Click</button>
    <div id="content" class="content"></div>
</body>

通过ajax请求观察div变异

2 个答案: