MutationObserver在範圍文本更改時不會觸發

Question

這只是一個簡化的示例，不是實際的東西。

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

爲什麼不是我在<span>更改文本MutationObserver射擊？

Answer 1

添加childList: true解決了這個問題。

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

的childList：設置爲true，如果添加和目標節點的子元素（包括文本節點）的清除也必須得到遵守。

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