javascript - MutationObsrver not able to recognise changes -

i have written small script identify changes in paragraph. don't know why changes not identified mutationobserver. want alert displayed when there changes made text.

$(function(){      //store test paragraph node      var test = $('#test');            //observe paragraph      this.observer = new mutationobserver( function(mutations) {          alert('paragraph changed!')      }.bind(this));      this.observer.observe(test.get(0), {characterdata: true, childlist: true});  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <div contenteditable="true" id="editor">  <p id="test">  edit text!   </p>  </div>

any or suggestions highly appreciated, thank in advance!

you need add subtree: true config (example below). because character data that's changing isn't p element, it's text node within p element.

if observing test.get(0).firstchild (the p element's initial child text node) instead, you'd notification without subtree flag — of course, wouldn't notifications from, say, em element within p. adding subtree best bet.

corrected example:

$(function(){      //store test paragraph node      var test = $('#test');            //observe paragraph      this.observer = new mutationobserver( function(mutations) {          alert('paragraph changed!')      }.bind(this));      this.observer.observe(test.get(0), {          characterdata: true,          childlist: true,          subtree: true     // <===== change here      });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <div contenteditable="true" id="editor">  <p id="test">  edit text!   </p>  </div>