Using DOMSubtreeModified mutation event. in jQuery

Question

I have used the following jQuery code on my page and everything works fine on chrome.But when I open up the respective page in firefox I get the Unresponsive Script Error.

I know as per DOM3 specification the mutation events have been deprecated. But Still if anyone could help me out here, I'll be obliged.

jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
            $(this).siblings().slideToggle();

            });
 });

Respective HTML is:

<div class="btn-slide" id="term">
    <div class="click-slide">
      <button>Search Terms </button>
    </div>
    <div class="btn-box">
       <label><span>Novena</span></label>
    </div>
</div>

score 19 · Answer 1 · edited Feb 21 '19 at 07:53

Well this might not be a suitable answer here since the question was about Mutation-events, and the one posted below is using MutationObserver but still I'm posting it as some may find this useful.

This is the alternative I used for DOMSubtreeModified event in case some nodes are being added in the DOM.

var target = $( "#term" )[0];
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
       var newNodes = mutation.addedNodes; // DOM NodeList
       if( newNodes !== null ) { // If there are new nodes added

        //alert('something has been changed');

      }
   });    
});

// Configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);
// Later, you can stop observing
// observer.disconnect();

nice concise mutation observer example. with some jquery. thanks! — Cody A. Ray, Nov 21 '17 at 03:47
Yes very helpful thank you! I modified to `mutations[0].addedNodes` to only get the 1st mutation in my case. Thanks again. — Joe, Feb 24 '20 at 14:38

score 17 · Accepted Answer · answered Aug 01 '14 at 15:03

It looks like in Firefox, the call to .slideToggle() is triggering the DOMSubtreeModified event, while this is not happening in Chrome. So basically in Firefox, something initially triggers the event which binds your click handler. All is good at this point. When you then proceed to click, the slideToggle happens as expected. However, that fires off the DOMSubtreeModified event and you then end up with two click event handlers both doing slideToggle because they were now registered twice. The next time you click is when the infinite loop happens. Basically the multiple click events keep triggering DOMSubtreeModified which registers more click handlers which makes more slideToggles happen which triggers more DOMSubtreeModifieds, and so on and so forth. To fix this, you can use jQuery's .one which tells your page to only fire off that DOMSubtreeModified handler once, which prevents this loop. If that is not a suitable solution, you'll just need to come up with some other way to make sure the .click handlers do not get bound more than once.

jQuery('#term').one("DOMSubtreeModified",function(){   //Notice this is using .one and not .on

Check out this JSFiddle - it is using .one but I was able to verify that when using .on, the problem happened in Firefox and not Chrome.

That's really well explained. I noticed what's happening when using ".on" in place of ".one" in the fiddle. Thanks. — Amit Singh, Aug 01 '14 at 15:10
wow... you answered my question and a question I had a while ago. I had never heard of the `.one` function — krummens, May 22 '16 at 20:47

Indiana Jones · Answer 3 · 2021-07-02T13:12:00.950

Oh thank you so much !

I added the management of deleted nodes.

On the other hand, if a node is created or not, it is necessary to check if the array is empty

        var observer = new MutationObserver(function( mutations ) {
            mutations.forEach(function( mutation ) {
                var newNodes = mutation.addedNodes; // DOM NodeList
                var removeNodes = mutation.removedNodes;
                // console.log(newNodes)
                // console.log(removeNodes)
                if(newNodes.length !== 0) { // If there are new nodes added
                    console.log('create')
                }
                if(removeNodes.length !== 0) { // If there are old nodes
                    console.log('remove')
                    console.log(removeNodes[0])
                }
            });
        });

Using DOMSubtreeModified mutation event. in jQuery

3 Answers3

Linked