Jquery.Change not working

I am having some trouble with $.change in jQuery.

HTML

<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>

JS

$('.btn').on('click', function() {
  $('.change').text('Click Me');
  $('.onchange').text('');
});
$('.change').on('click', function() {
  $('.change').text('Nearly There');
});
$('.change').on('change', function() {
  $('.onchange').text("Nice One");
});

Here is the link to Codepen

Basically what should happen is when "Click Me" is clicked the text will change to "Nearly There" then straight after "Nice One" should appear below.

However this isn't happening, I've tried both

$('.change').on('change', function() {});
$('.change').change(function() {});

And neither work.

Note The code I have supplied is my test code, and is all relevant to what I'm trying to achieve.

Update I wasn't aware the .change only worked for form controls, which would explain why it wasn't working.

Solution CreMedian - Suggested the solution that I was looking for.

$('.change').on('DOMSubtreeModified', function() { });

I have updated the CodePen for future reference.

via Chebli Mohamed