Question

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

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

在MutationObserver更改文字时，为什么<span>无法触发？

Answer 1

添加childList: true可解决问题。

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

childList：如果要观察目标节点的子元素（包括文本节点）的添加和删除，则设置为true。

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

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

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

1 个答案: