JQuery - detecting changes in the contents of a SPAN field

Question

I have the following code snippet that is used to simulate a text field:

<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, for example. 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 does not seem to work.

(nb $(document.body ) is used because on my main page the start field is loaded dynamically)

I assume that this is a “change” that he does not like, but cannot understand what to replace. (jQuery / HTML5 is excellent as it is used only internally).

I saw a few examples, but they usually seem to be more complex scenarios that require several functions to detect changes when some other events happen, but I believe there should be a simpler solution similar to the on change method.

Answer 1

You can use this DOMSubtreeModified event:

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

Excerpt

 $(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> 

Answer 2

I think this code will help you.

 $(document).ready( function() { $('#myId').bind( "contentchange", function(){ alert("Changed"); }); $( "#btn" ).click( function () { $('#myId').html( "Value" ).trigger( "contentchange" ); }); }); 

http://jsfiddle.net/RKLmA/192/