mutation-observers

Reconnect and disconnect a MutationObserver

由 邮差的信 提交于 2019-12-18 13:09:33
问题 This question is the sequel of this one. However, it is not necessary to read the previous, I'm just giving a link for interested readers. There is an observer, which will react on every element with some class, as @Shomz suggested: var target = document.querySelectorAll(".someclass"); for (var i = 0; i < target.length; i++) { create(target[i]); } function create(t) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { var foo = t.getAttribute("aaa

Observe mutations on a target node that doesn't exist yet

由 这一生的挚爱 提交于 2019-12-18 10:36:04
问题 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 } ); );

How do you get a mutation observer to detect a value change of a textarea?

由 青春壹個敷衍的年華 提交于 2019-12-17 20:08:27
问题 I have seen mutation observers used to obtain the properties of doms when they are modified such as with the google chrome developer tools. I can't, however, find how to call a function when the text within a textarea changes due to a user typing or pasting. In my code, as the user types the callbacks don't get called, even with all the observe options set to true. What is the code for this? 回答1: The mutation observers listen for changes of the DOM. The current state of form elements, however

Performance of MutationObserver to detect nodes in entire DOM

由 不羁岁月 提交于 2019-12-17 03:51:28
问题 I'm interested in using MutationObserver to detect if a certain HTML element is added anywhere in an HTML page. For example's sake, I'll say that I want to detect if any <li> 's are added anywhere in the DOM. All the MutationObserver examples I've seen so far only detect if a node is added to a particular container. For example: some HTML <body> ... <ul id='my-list'></ul> ... </body> MutationObserver definition var container = document.querySelector('ul#my-list'); var observer = new

DOMSubtreeModified not working in chrome

由 情到浓时终转凉″ 提交于 2019-12-12 13:05:14
问题 I have this code working perfectly in firefox. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript"> function CreateEvent() { var x = document.createEvent("MutationEvent"); x.initMutationEvent("DOMSubtreeModified", true, false, null, "", "", "", 0); document.dispatchEvent(x); } $(document).ready(function() { $('#myDiv')[0].addEventListener(

MutationObserver: How to observe mutations in width/height of flex child?

由 ≯℡__Kan透↙ 提交于 2019-12-11 17:17:07
问题 Given the following DOM structure... <div id="outer-container"> <div class="side-panel"><div width="200px"/></div> <div id="content"><!-- some content --></div> <div class="side-panel"><div width="100px"/></div> </div> With the following CSS rules... #outer-container { display: 'flex'; align-items: 'stretch'; width: '100vw'; height: '100vh'; } .side-panel { flex-shrink: 0; } #content { display: 'flex'; flex-direction: 'column'; align-items: 'stretch'; flexGrow: 1; } How can I observe

usage of MutationObserver to manipulate and set 'type' property of an input element loaded dynamically

由 荒凉一梦 提交于 2019-12-11 15:16:23
问题 I had a question earlier here which got me to this stage to ask another question: Summary of what I am trying to achieve: I am trying to use MutationObserver to keep a watch on my document and then change the 'type' of input element loaded dynamically. Incomplete Code and needs help: var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { console.log(mutation.type); // here I need to get all elements with class "GTnumeric" and // change its "type" to

How to use MutationObserver() or similar to monitor change in location of div item?

由 我只是一个虾纸丫 提交于 2019-12-11 10:25:49
问题 I'm using JQuery.cycle2 to cycle through images in a <div> . One of the custom style properties it provides is the ability to center the image in the <div> area, using this custom <div> property: data-cycle-center-horz="true" The <div> has id="cycle-slideshow" and is initially set to style="visibility:hidden" so that the slideshow will not be revealed until other necessary actions are performed. To visibilize the slideshow, I use: $('#cycle-slideshow').css({'visibility': 'visible'}); ...which

Mutation observer - DOM is changed by callback function

由 て烟熏妆下的殇ゞ 提交于 2019-12-11 03:18:16
问题 is there a way, how to force mutation observer to ignore DOM changes cause by callback function? Right now I have: var config = { attributes: true, childList: true, characterData: true }; var target = document.body; var timer; // create an observer instance var observer = new MutationObserver(function(mutations) { // fired when a mutation occurs timer = setTimeout(function () { _3rd_party_callback(); }, 500); }); observer.observe(target, config); Problem is that, _3rd_party_callback callback

Can mutation observer listen for changes in “data-” attributes?

由 走远了吗. 提交于 2019-12-11 01:09:48
问题 So the problem is that I have an html element which has an object in a "data-" attribute (set via jQuery ofc) and I want to listen to changes in that attribute. I have already tried a lot of things, like setting almost all possible combination values in the MutationObserverInit object, but none of this help. Does anybody know if it is possible? $('#some-id').click( function() { //$('#some-id').attr('title', 'some-title'); //this works $('#some-id').data('foo', 'bar1'); //this don't }); var
订阅 mutation-observers