jQuery- Detect change in the content of a SPAN field

Question

I have the below piece of code which is used to simulate a text box:

<label for="alertCmpVal">ALERT VALUE:</label>
<span class="center textBox displayField highlight" id="alertCmpVal" contenteditable> <?php print $alert_val;?> </span>

I need to know when the content changes, e.g. I click on it, and change it from 0 to 1.

I tried:

$(document).ready(function() 
{
    $(document.body).on('change','#alertCmpVal',function()
    {   
        alert("boo");
        $('#alertCmpVal').removeClass('highlight');
    })
}

but this doesn't seem to work.

(n.b. $(document.body) is used because on my main page, the initial field is loaded dynamically)

I'm guessing it is the 'change' that it doesn't like, but can't see what to replace it with. (jQuery / HTML5 is fine, as it is only used internally).

I've seen a few examples, but they generally seem to be for more complex scenarios, requiring multiple functions to detect the change when certain other things occur, but I figure there must be a simpler solution similar to the on change method.

Answer 1

You can use this event DOMSubtreeModified:

$("span").on('DOMSubtreeModified', function () {
  alert("Span HTML is now " + $(this).html());
});

Snippet

$(function () {
  $("a").click(function () {
    $("span").html("Hello, World!");
  });
  $("body").on('DOMSubtreeModified', "span", function () {
    alert("Span HTML is now " + $(this).html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span>Hello</span>
<a href="#">Click</a>