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

Почему не MutationObserver обжиг при изменении текста в <span>?

Answer 1

Добавление childList: true устраняет проблему.

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

childList: Установите верно, если дополнения и удаления дочерних элементов целевого узла (включая текстовые узлы) должны быть соблюдены.

В вашем примере вы меняете дочерний элемент текстового узла элемента 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');" />