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>
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 DOMSubtreeModified
s, 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.