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? — apsillers
– apsillers, Commented Apr 22, 2016 at 13:56
Possible duplicate of Listener for property value changes in a javascript object — Daniel Corzo
– Daniel Corzo, Commented Apr 22, 2016 at 14:10

Rory McCrossan · Accepted Answer · 2016-04-22 13:55:58Z

5

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.

answered Apr 22, 2016 at 13:55

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

imvain2 · Accepted Answer · 2016-04-22 14:02:07Z

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, 2016 at 14:02

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

1 Comment

Black Over a year ago

This would also be possible. Thanks!

Collectives™ on Stack Overflow

Detect variable change with jquery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related