跨度文本更改的 MutationObserver 不会触发

Question

这只是一个简单的例子，并不是真实的。

MutationObserver 仍然没有触发，所以我对它的工作原理的假设是错误的。

$(function() {
  var editButtonVisibility = function() {
    console.log('bam');
  }

  $('#RiskPostcodeSummary span').on("change", function() {
    console.log("pew pew");
  });

  var observer = new MutationObserver(function(e) {
    editButtonVisibility();
  });

  observer.observe($('#RiskPostcodeSummary span')[0], {
    characterData: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="RiskPostcodeSummary">
  <span></span>
</div>
<input type="button" value="click" onClick="$('#RiskPostcodeSummary span').text('sdfsdf');" />

当我在 <span> 中更改文本时，为什么 MutationObserver 没有触发？

Answer 1

添加 childList: true 解决了问题。

来自https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver：

childList: Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.

在您的示例中，您正在更改 span 元素的文本节点子元素。

$(function() {
  var editButtonVisibility = function() {
    console.log('bam');
  }

  $('#RiskPostcodeSummary span').on("change", function() {
    console.log("pew pew");
  });

  var observer = new MutationObserver(function(e) {
    editButtonVisibility();
  });

  observer.observe($('#RiskPostcodeSummary span')[0], {
    characterData: true,
    childList: true
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="RiskPostcodeSummary">
  <span></span>
</div>
<input type="button" value="click" onClick="$('#RiskPostcodeSummary span').text('sdfsdf');" />

跨度文本更改的 MutationObserver 不会触发

MutationObserver on span text change does not trigger

javascript

jquery

html

mutation-observers