使用 DOMSubtreeModified 突变事件。在 jQuery 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25082158/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using DOMSubtreeModified mutation event. in jQuery
提问by jGupta
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.
我在我的页面上使用了以下 jQuery 代码，在 chrome 上一切正常。但是当我在 Firefox 中打开相应的页面时，我收到了无响应的脚本错误。
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.
我知道根据 DOM3 规范，突变事件已被弃用。但是，如果有人能在这里帮助我，我将不胜感激。
jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
$(this).siblings().slideToggle();
});
});
Respective HTML is:
各自的 HTML 是：
<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>
回答by p e p
It looks like in Firefox, the call to .slideToggle()is triggering the DOMSubtreeModifiedevent, 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 slideTogglehappens as expected. However, that fires off the DOMSubtreeModified event and you then end up with two click event handlers both doing slideTogglebecause they were now registered twice. The next time you click is when the infinite loop happens. Basically the multiple click events keep triggering DOMSubtreeModifiedwhich registers more click handlers which makes more slideToggleshappen which triggers more DOMSubtreeModifieds, and so on and so forth. To fix this, you can use jQuery's .onewhich tells your page to only fire off that DOMSubtreeModifiedhandler 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 .clickhandlers do not get bound more than once.
看起来在 Firefox 中，调用 to.slideToggle()正在触发DOMSubtreeModified事件，而这在 Chrome 中没有发生。所以基本上在 Firefox 中，某些东西最初会触发绑定您的点击处理程序的事件。在这一点上一切都很好。当您继续单击时，slideToggle会按预期发生。但是，这会触发 DOMSubtreeModified 事件，然后您最终会得到两个点击事件处理程序，slideToggle因为它们现在被注册了两次。下次单击时是无限循环发生的时间。基本上，多个点击事件不断触发DOMSubtreeModified，它注册了更多的点击处理程序，这使得更多的slideToggles事件触发更多的DOMSubtreeModifieds，依此类推。要解决此问题，您可以使用 jQuery.one来告诉您的页面只触发那个DOMSubtreeModified处理程序一次，这可以防止此循环。如果这不是一个合适的解决方案，您只需要想出一些其他方法来确保.click处理程序不会被多次绑定。
jQuery('#term').one("DOMSubtreeModified",function(){ //Notice this is using .one and not .on
Check out this JSFiddle- it is using .onebut I was able to verify that when using .on, the problem happened in Firefox and not Chrome.
查看此JSFiddle- 它正在使用，.one但我能够验证在使用 .on 时，问题发生在 Firefox 而不是 Chrome 中。
回答by jGupta
Well this might not be a suitable answer here since the question was about Mutation-events, and the one posted below is using MutationObserverbut still I'm posting it as some may find this useful.
好吧，这可能不是一个合适的答案，因为问题是关于Mutation-events，下面发布的一个是使用MutationObserver但我仍然发布它，因为有些人可能会发现这很有用。
This is the alternative I used for DOMSubtreeModified event in case some nodes are being added in the DOM.
这是我用于DOMSubtreeModified 事件的替代方法，以防在 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();
