calling function based on dom change

Question

I rewrote a bit of my code based on that it's not really feasible to check to see if a javascript variable changes. But, how would I do it with a dom element? For instance

<div id='foo'>123</div>
<script>
$('#foo').html('456');
// function gets fired since #foo changed.
</script>

I tried

$("#foo").change(function () {
      alert('change!');
    })
    .change();

but no luck.

Answer 1

See:

• Detect div content changes with jquery
• Custom events in jQuery open doors to complex behaviors

Answer 2

Put $(document).ready() arround your code.

$(document).ready(function() {
    $("#foo").change(function () {
        alert('change!');
    }).change();

    $('#foo').html('456');
})