使用DOMSubtreeModified变异事件.在jQuery中

Question

我在我的页面上使用了以下jQuery代码,并且chrome上的一切正常.但是当我在firefox中打开相应的页面时,我得到了无响应的脚本错误.

我知道根据DOM3规范,变异事件已被弃用.但是,如果有人能帮助我在这里,我将被迫.

jQuery('#term').on("DOMSubtreeModified",function(){
$("#term > .click-slide").click(function(){
            $(this).siblings().slideToggle();

            });
 });

各自的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>

Answer 1

看起来在Firefox中,调用.slideToggle()是触发DOMSubtreeModified事件,而Chrome中没有发生这种情况.所以基本上在Firefox中,某些东西最初会触发绑定点击处理程序的事件.在这一点上一切都很好.然后,当您继续单击时,slideToggle按预期发生.但是,这会触发DOMSubtreeModified事件,然后最终会有两个单击事件处理程序,slideToggle因为它们现在已经注册了两次.下次单击时是无限循环发生的时间.基本上,多次单击事件会保持触发DOMSubtreeModified,slideToggles这会触发更多DOMSubtreeModified的点击处理程序,从而使更多的事件发生,从而触发更多的s,依此类推等等.要解决这个问题,您可以使用jQuery .one来告诉您的页面只触发该DOMSubtreeModified处理程序一次,这会阻止此循环.如果这不是一个合适的解决方案,你只需要提出一些其他的方法来确保.click处理程序不会被绑定多次.

jQuery('#term').one("DOMSubtreeModified",function(){   //Notice this is using .one and not .on

看看这个JSFiddle - 它正在使用,.one但我能够验证在使用.on时,问题发生在Firefox而不是Chrome.

Answer 2

那么这可能不是一个合适的答案,因为问题是关于Mutation-events,下面发布的是使用MutationObserver,但我仍然发布它,因为有些人可能觉得这很有用.

如果在DOM中添加了一些节点,这是我用于DOMSubtreeModified事件的替代方法.

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