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

这只是一个简单的例子，不是实际的事情。

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

JSFiddle

$(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');" />

当我更改MutationObserver中的文本时，为什么<span>不触发？

最佳答案

添加childList: true可解决此问题。

从https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver:



在您的示例中，您正在更改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');" />

关于javascript - 跨度文本更改上的MutationObserver不会触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33521073/