Using DOMSubtreeModified mutation event. in jQuery

jGupta picture jGupta · Aug 1, 2014 · Viewed 45.2k times · Source

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

jGupta picture jGupta · Aug 1, 2014

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