Would like help figuring out the best way to watch for changes to the DOM

Question

I'm trying to use Jquery-Mutation Summary https://code.google.com/p/mutation-summary/ "a JavaScript library that makes observing changes to the DOM fast, easy and safe"

It can be found here: https://github.com/joelpurra/jquery-mutation-summary

Here's an example of it at work: http://joelpurra.github.io/jquery-mutation-summary/example/demo.html

All I want to do is call a function when there's changes to content within an element such as a div with an id "MyDiv"

Here's my code. What am I doing wrong? There is no alert message as my function that's being called in this example is suppose to display once changes are observed.

<script src="http://joelpurra.github.io/jquery-mutation-summary/lib/mutation-summary  /src/mutation-summary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://joelpurra.github.io/jquery-mutation-summary/src/jquery.mutation- summary.js"></script>

<script>
function MyFunction(){
alert('changes have been made');
}

// This code won't be executed until jQuery has been loaded.
$(function() {
var $ChangeThere = $("#MyDiv")
// The callback in this case will only print the result
// Connect mutation-summary
$ChangeThere.mutationSummary("connect", callback, [{
    all: true
}]);

// Disconnect when done listening
//$ChangeThere.mutationSummary("disconnect");




function callback(summaries) {

    MyFunction();
}
});
</script>

It looks like you're using it correctly. What problem are you having? — Barmar, Feb 15 '14 at 01:08
My problem is, there's no alert message. It's not calling my function when changes are made. — Brandon, Feb 15 '14 at 01:10
You have spaces in your `src` URLs. Is that in the original code or a copying error. — Barmar, Feb 15 '14 at 01:17
After I fix the URLs, your code works for me: http://jsfiddle.net/barmar/3nd7K/4/ — Barmar, Feb 15 '14 at 01:18
You know what the issue is, it's the element I'm trying to check for changes. It's an iframe. — Brandon, Feb 15 '14 at 01:28

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

In newer versions of Firefox, a mozAfterPaint event exists, but there's obvious compatibility problems with that, so I'd suggest checking for the various things that cause reflows by adding a check into an abstracted version of each cause. A list of causes and some other information can be found in this SO

edited May 23 '17 at 12:29

Community

1
1

answered Feb 15 '14 at 01:55

user70585

1,397
1
14
19

Would like help figuring out the best way to watch for changes to the DOM

1 Answers1