Skip to content

Instantly share code, notes, and snippets.

@zplume
Created November 6, 2017 11:06
Show Gist options
  • Save zplume/de65d55702d0735398105e50f2d6de0c to your computer and use it in GitHub Desktop.
Save zplume/de65d55702d0735398105e50f2d6de0c to your computer and use it in GitHub Desktop.
MutationObserver vs DOMSubtreeModified example which allows detecting changes in elements that don't exist yet, by detecting changes in a parent element that does exist at the time the function is executed.
// This example depends on jQuery().on and _.debounce
// Create a MutationObserver to trigger a callback function
// when the element located via document.querySelector(elementSelector) changes
function getMutationObserver(elementSelector, callback) {
var observer = new MutationObserver(callback);
var config = { attributes: true, childList: true, characterData: false };
observer.observe(document.querySelector(elementSelector), config);
return observer;
}
function onFieldRenderedAndChanged(parentSelector, fieldSelector, callback) {
var observer;
// observe changes to the 'parentSelector' element
observer = getMutationObserver(parentSelector, function(mutations) {
// If the 'fieldSelector' element exists in the DOM
if(!!document.querySelector(fieldSelector)) {
// Disconnect parent element mutation observer
observer.disconnect();
// Wait for 'fieldSelector' taxonomy field to update, trigger callback when it does
getMutationObserver(parentSelector + " " + fieldSelector, callback);
}
});
}
// callback function to be executed when the element retrievable via
// the 'fieldSelector' CSS selector changes
function onFieldChangedCallback(fieldSelector) {
var field = document.querySelector(fieldSelector);
// do something with updated field element here
}
// CSS selector for an element that exists on the page when this JavaScript is executed,
// which is a parent of the element referenced by 'fieldSelector'.
var parentSelector = ".parentElementClass";
// CSS selector for element which does not exist on the page when this JavaScript is executed,
// which is a child of the element referenced by 'parentSelector'.
var fieldSelector = ".childElementClass";
// Use MutationObserver if available or fallback to DOMSubtreeModified in older browsers.
// Rate-limit event handling with _.debounce to reduce performance impact.
if (MutationObserver) {
onFieldRenderedAndChanged(parentSelector, fieldSelector, _.debounce(onFieldChangedCallback.bind(this, fieldSelector), 500));
}
else {
$(parentSelector).on("DOMSubtreeModified", fieldSelector, _.debounce(onFieldChangedCallback.bind(this, fieldSelector), 500));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment