mutation-observers

The code from react-measure takes advantage of the new MutationObservers present in current browsers. MSDN has this to say about it: Additionally, mutation observers are designed to record multiple changes before notifying your observer. They batch mutation records to avoid spamming your app with events. By contrast, mutation events are synchronous and interrupt normal code execution to notify your app of mutations. Despite the delayed notification model employed by mutation observers, your apps's observer is still guaranteed to receive (and have a chance to process) all the mutation records

I have a select[multiple] which I have given a class custom-multiselect on my page for which I am catching the DOMSubtreeModified event as follows: HTML: <select class="custom-multiselect"></select> JQuery: $('.custom-multiselect').each(function (i, select) { var sel = this; adjustHeight(sel); //Custom function //Binding DOMSubtreeModified to catch if the select list gets modified by the user $(sel).on('DOMSubtreeModified', function () { adjustHeight(sel); }); //For Internet Explorer $(sel).on('propertychange', function () { adjustHeight(sel); }); }); This approach works flawlessly. I want to

I've seen a lot of different questions similar to this, but all of them generally targeted a specific selector. Please let me know if there is a duplicate somewhere and I've missed it. Take this scenario: You want to build a jquery plugin for a wordpress, drupal, or basically any site that uses third party functionality. Since you don't know ahead of time every specific event and selector you will need to target how would you add jquery/javascript functionality to elements that are created dynamically. Plus you don't know how the element is created (callback using ajax/php/etc). Example: I

Up until recently I thought that childList : true on MutationObserver was to be used when child node is being added/removed e.g from <span id='mama-span'> </span> to <span id='mama-span'><span id='baby-span'></span></span> and characterData : true was to be used when text inside observed element chages e.t <span> </span> to <span> with some text </span> . It turns out that for text change to be observed one needs to add childList : true . Can anyone think of situation in which characterData would be used without childList? What is it used for? You can observe a text node directly. In that case

From http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers I got the following code: var insertedNodes = []; var observer = new WebKitMutationObserver(function(mutations) { alert('run'); mutations.forEach(function(mutation) { for (var i = 0; i < mutation.addedNodes.length; i++) insertedNodes.push(mutation.addedNodes[i]); }) }); observer.observe(document, { childList: true }); console.log(insertedNodes); var divElement = document.createElement('div'); divElement.innerHTML = 'div element'; document.querySelector('body').appendChild(divElement); jsFiddle: http:/