Created
November 6, 2017 11:06
-
-
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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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