jqueryhtmlfirefoxmutation-events

Using DOMSubtreeModified mutation event. in jQuery


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>

Solution

  • 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.