jQuery - Détecter les changements dans le contenu d'un champ SPAN

Question

J'ai le morceau de code ci-dessous qui est utilisé pour simuler une zone de texte:

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

J'ai besoin de savoir quand le contenu change, par ex. Je clique dessus et le change de 0 à 1.

J'ai essayé:

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

mais cela ne semble pas fonctionner.

(n.b. $(document.body) est utilisé car sur ma page principale, le champ initial est chargé dynamiquement)

Je suppose que c'est le "changement" qu'il n'aime pas, mais je ne vois pas par quoi le remplacer. (jQuery/HTML5 est très bien, car il n'est utilisé qu'en interne).

J'ai vu quelques exemples, mais ils semblent généralement être pour des scénarios plus complexes, nécessitant plusieurs fonctions pour détecter le changement lorsque certaines autres choses se produisent, mais je pense qu'il doit y avoir une solution plus simple similaire au on change méthode.

Answer 1

Vous pouvez utiliser cet événement DOMSubtreeModified:

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

Extrait

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