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>

Answer 1

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.

Answer 2

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();