jQuery- Wykrywanie zmian w treści pola SPAN

Question

mam poniższy kawałek kodu, który jest używany do symulacji pola tekstowego:

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

Muszę wiedzieć, kiedy zmienia się treść, na przykład Klikam na nią i zmienić go od 0 do 1.

Próbowałem:

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

ale to nie wydają się działać.

(nb $(document.body) jest stosowany ze względu na mojej stronie głównej, pole początkowa jest ładowany dynamicznie)

Zgaduję, że jest „zmiany”, że nie podoba, ale nie może zobaczyć, co aby go zastąpić. (jQuery/HTML5 jest w porządku, ponieważ jest używany tylko wewnętrznie).

Widziałem kilka przykładów, ale generalnie wydają się one być dla bardziej złożonych scenariuszy, wymagających wielu funkcji do wykrywania zmiany, gdy pewne inne rzeczy występują, ale sądzę, że musi istnieć prostsze rozwiązanie podobne do metody on change .

Answer 1

Można użyć tego zdarzenia DOMSubtreeModified:

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

urywek

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

myślę, że ten kod będzie pomóc.

$(document).ready(function() { 
    $('#myId').bind("contentchange", function(){ 
     alert("Changed"); 
    }); 

    $("#btn").click(function() { 
     $('#myId').html("Value").trigger("contentchange"); 
    }); 
}); 

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