使用DOMSubtreeModified突变事件。在jQuery中 [英] Using DOMSubtreeModified mutation event. in jQuery

问题描述

我在页面上使用了下面的jQuery代码，并且在chrome中一切正常。但是当我在firefox中打开相应页面时，出现Unresponsive Script Error。

<我知道，根据DOM3规范，突变事件已被弃用。但是，如果有人可以帮助我在这里，我会被迫。
$ b $ pre $ jQuery（'＃term'）。on （）函数（）{
$（＃term> .click-slide）。click（function（）{
$（this）.siblings（）。slideToggle（）;

}）;
}）;


分别是：

 < div class =btn-slideid =term> 
< div class =click-slide> 
<按钮>搜寻字词< / button> 
< / div> 
< div class =btn-box> 
< label>< span> Novena< / span>< / label> 
< / div> 
< / div> 
  

解决方案

c $ c> .slideToggle（）正在触发 DOMSubtreeModified 事件，而这在Chrome中不会发生。所以基本上在Firefox中，最初触发绑定您的点击处理程序的事件。所有这一切都很好。当您继续点击时， slideToggle 按预期发生。但是，这会触发DOMSubtreeModified事件，然后最终得到两个执行 slideToggle 的单击事件处理程序，因为它们现在被注册了两次。下一次你点击是当无限循环发生。基本上，多个点击事件持续触发 DOMSubtreeModified ，它会注册更多的点击处理程序，使更多 slideToggles 发生，触发更多 DOMSubtreeModified s等等。为了解决这个问题，你可以使用jQuery的 .one ，它告诉你的页面仅仅触发一次 DOMSubtreeModified 处理程序，阻止这个循环。如果这不是一个合适的解决方案，你只需要想出其他方法来确保 .click 处理程序不会被绑定多次。

  jQuery（'＃term'）。 .on 
  

看看这个 .one ，但是我可以验证使用.on时，问题发生在Firefox而不是Chrome 。

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

这篇关于使用DOMSubtreeModified突变事件。在jQuery中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！