Skip to content

Tag: mutation-observers

Mutationobserver not fired when innerhtml changed by javascript code

I have a MutationObserver that observe an element with id shipping_cost and fire function updateTotal() when the innerhtml of the element changed. The MutationObserver works when the innerHTML is changed from external source (such as inspect element). But when i change the innerHTML from inside javascript, MutationObserver did not get fired, where did i do wrong? It can be seen

Rewrite MutationObserver() with async/await

How can I write this mutation observer code, using async/await? I want to return true after console.log(“Button is appearing…”);. Could someone show me the best way to write this code? I also need to clarify, this code is watching for a button, which appears and then disappears. And the reappears again, multiple times. So the mutationObserver, is watching for the

How to determine if mutation has been called?

I have this mutation observer function below. The issue is that if the condition is met for “false” that console.log will log many times in the browser. I think the best way to fix this is to add something in here that if the mutation is met don’t run function. Does adding in mutationObserver.disconnect(); after the else if condition the

Detect attachShadow event

I’d like to detect an event of attaching shadow to the host element. Use-case: using MutationObserver to watch any DOM changes and post-process the changed content as part of binding (tying) framework’s logic. Why do I need to detect this event? In order to be able to watch for a changes within the shadowDOM, another MutationObserver should be created and

Detect input value change with MutationObserver

I want to detect when text/value change in input field. Even if I change the value with js, I want to detect that changes. Here’s what I’ve tried so far in demo in fiddle. HTML: JavaScript: Answer To understand what is going on is necessary to clear up the difference between attribute (content attribute) and property (IDL attribute). I won’t

MutationObserver and Shadow DOM

I’m using Polymer’s ShadowDOM and MutationObserver polyfills and need to: Detect when a HTMLCanvasElement is inserted so that I can perform layout (its width and height are undetermined through offsetWidth / offsetHeight when detached from the DOM tree) Detect when the element is removed so I can halt its requestAnimationFrame loop Traditionally, without Shadow DOM, this works as follows: Attach

Detect changes in the DOM

I want to execute a function when some div or input are added to the html. Is this possible? For example, a text input is added, then the function should be called. Answer 2015 update, new MutationObserver is supported by modern browsers: Chrome 18+, Firefox 14+, IE 11+, Safari 6+ If you need to support older ones, you may try