Detect variable change with jquery

Question

I make an AJAX call to my server to read a file and get the value back as response. If the request was successful then i replace the innerHTML from my <p> element with id output with the response value. Now I try to fire an alert every time if the value has changed. I tried to add an event to my <p> element so I can detect if the variable has changed and fire my function:

<p id="output"></p>

<script>
    $("#output").change(function() {
        alert("HELLO WORLD!");
    });
</script>

There is no alert() showing up.

Answer 1

Changing the text/HTML value of an element doesn't raise an event. You would need to trigger one manually. For example:

// in the $.ajax success handler:
$('#output').trigger('contentchanged');

// event handler
$("#output").on('contentchanged', function() {
    alert("HELLO WORLD!");
});

You could also use a Mutation Observer for this, but note they are not supported in older browsers, such as IE10 and lower.

Answer 2

according to the logic that you described, the content is only changed when ajax was successful. If so, wouldn't the cleanest solution simply be, in your ajax success, run the function that you are expecting to run on content change?