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