If you're interested in testing MutationObserver, check out this JSfiddle example I created. It's super simple and easy to follow. http://jsfiddle.net/bqcpna3k/6/
HTML Structure:
<div>
<input name='a' value='1'>
<input name='b' value='1'>
<input name='c' value='1'>
<input name='d' value='1'>
<input name='e' value='1'>
<input name='f' value='1'>
</div>
<div>
<p>The goal is to dynamically update labels using a mutation observer function.</p>
a <label id='a'></label>
b <label id='b'></label>
c <label id='c'></label>
d <label id='d'></label>
e <label id='e'></label>
f <label id='f'></label>
</div>
Javascript Logic:
var inputs=[];
// Determine which inputs receive dynamic number updates
$('input').each(function(i,e){
if (Math.random()>0.5) inputs.push(e); else e.value='ignore';
});
// Update numbers in input boxes at regular intervals
setInterval(function() {
inputs.forEach(function(e){e.value=Math.floor(Math.random()*50);});
},1000);
// Ensure the mutation listener functions reliably when numbers change
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// Define the target element to observe for changes
var target = document.body; // Simple selection
// Activate the MutationObserver to listen for specified changes
observer.observe(target, { attributes: true, childList: true, characterData: true });
console.log('Initial setup completed.');
CSS Styling:
label {display:block}
During my previous tests, I encountered issues with the reliability of the MutationObserver function. Additionally, observing a div instead of the document body proved challenging.
In the provided JSfiddle demo, the MutationObserver does not execute as expected.