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.

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.

• javascript
• jquery

• possibly a duplicate of Is there a jQuery DOM change listener? – apsillers Commented Apr 22, 2016 at 13:56
• Possible duplicate of Listener for property value changes in a javascript object – Daniel Corzo Commented Apr 22, 2016 at 14:10

2 Answers 2

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.

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?