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.

possibly a duplicate of [Is there a jQuery DOM change listener?](http://stackoverflow.com/q/2844565/710446) — apsillers, Apr 22 '16 at 13:56
Possible duplicate of [Listener for property value changes in a javascript object](http://stackoverflow.com/questions/1063813/listener-for-property-value-changes-in-a-javascript-object) — Daniel Corzo, Apr 22 '16 at 14:10

score 5 · Accepted Answer · answered Apr 22 '16 at 13:55

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.

score 2 · Answer 2 · answered Apr 22 '16 at 14:02

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?

answered Apr 22 '16 at 14:02

imvain2

15,480
1
16
21

This would also be possible. Thanks! – Black Apr 22 '16 at 14:04

Detect variable change with jquery

2 Answers2