mutation-observers

I have a situation like so: I have a button with an ember action that causes a route change, with corresponding DOM updates. This DOM is also being watched by a mutation observer. What I want to do is run some jquery code after the user clicks the button but before the mutation observers fire. However currently the mutation observer is always firing before the jquery onClick is fired. How can I achieve my desired order? Should I use a deferred promise in the observer? 来源： https://stackoverflow.com/questions/29216434/how-to-get-a-jquery-onclick-to-fire-the-same-time-as-ember-click-and-before

I recently came across this awesome MutationObserver feature which sort of keep tracks of the changes on any dom element. I used the code that was shown on the mozilla developer network, but can't seem to make it run. This is the code I used ( link ): // create an observer instance var target = document.querySelector('#something'); console.log(target); var observer = new WebKitMutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log("Success"); //$('#log').text('input text changed: "' + target.text() + '"'); //console.log(mutation, mutation.type); }); });

I would like to use a MutationObserver object to observe changes to some of my DOM nodes. The docs give an example of creating a MutationObserver object and registering it on a target. // select the target node var target = document.querySelector('#some-id'); // create an observer instance var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // configuration of the observer: var config = { attributes: true, childList: true, characterData: true }; // pass in the target node, as well as the observer options observer

I am using MutationObserver to detect when a specific class has been added to an element. const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { const el = mutation.target; if ((!mutation.oldValue || !mutation.oldValue.match(/\bis-busy\b/)) && mutation.target.classList && mutation.target.classList.contains('is-busy')){ alert('is-busy class added'); } }); }); observer.observe(document.querySelector('div'), { attributes: true, attributeOldValue: true, attributeFilter: ['class'] }); My question is: Is there a better way to verify that this is a newly added class?

I'm trying to set MutationObserver for observing page mutation while loading. In order to do that, MutationObserver should be configured before page loading. With selenium-chromedriver, couldn't find the way to inject JS for such purpose. I know chrome extension can do that but extensions won't work on headless mode. That's the problem. It's possible via the DevTool API by calling Page.addScriptToEvaluateOnNewDocument from selenium import webdriver from selenium.webdriver.remote.webdriver import WebDriver import json def send(driver, cmd, params={}): resource = "/session/%s/chromium/send

Is it possible to observer mutations on a DOM node that doesn't exist yet? Example: My app creates a div at some point: <div id="message" data-message-content="foo" data-message-type="bar" /> . I want to watch for the creation & change of this div. var mutationObserver = new MutationObserver(function(mutations){ // Some code to handle the mutation. }); mutationObserver.observe( document.querySelector('#message'), { attributes: true, subtree: true, childList: true, characterData: false } ); ); Right now this returns an error since #message is null (the div hasn't been created yet). Failed to

I have a DIV with style resize: both and then I set a MutationObserver that listens for changes in attributes. mutObs = new MutationObserver(function () { console.log('Hello'); }); elem = document.getElementById('aDiv'); mutObs.observe(elem, { attributes: true }); elem.style.width = '300px'; //this fires the observer callback as expected I made a fiddle: http://jsfiddle.net/2NQQu/2/ In Chrome (I tested Chrome 31) the callback is not fired when you resize the DIV with the mouse. In Firefox it works fine. Is this behavior intentional and/or standard? Is it a bug? It is a bug in Chrome, reported

I have a div that has additional classes added to it programmatically. How can I detect the class name change without using this setInterval implementation? setInterval(function() { var elem = document.getElementsByClassName('original')[0]; if (elem.classList.contains("added")) { detected(); } }, 5500); MutationObserver? You can use a mutation observer . It's quite widely supported nowadays. var e = document.getElementById('test') var observer = new MutationObserver(function (event) { console.log(event) }) observer.observe(e, { attributes: true, attributeFilter: ['class'], childList: false,