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秒，依此类推。要解决这个问题，你可以使用jQuery的.one来告诉你的页面只触发一次DOMSubtreeModified处理程序，这会阻止这个循环。如果这不是一个合适的解决方案，您只需要提出一些其他方法来确保.click处理程序不会多次绑定。

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

查看此JSFiddle - 它正在使用.one，但我能够验证在使用.on时，问题发生在Firefox而不是Chrome。

Answer 2

这可能不是一个合适的答案，因为问题是关于突变事件，下面发布的是使用 MutationObserver 但我仍然发布它，因为有些人可能觉得这很有用。

这是我用于 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();

Answer 3

哦，非常感谢！

我添加了删除节点的管理。

另一方面，如果一个节点创建与否，则需要检查数组是否为空

        var observer = new MutationObserver(function( mutations ) {
            mutations.forEach(function( mutation ) {
                var newNodes = mutation.addedNodes; // DOM NodeList
                var removeNodes = mutation.removedNodes;
                // console.log(newNodes)
                // console.log(removeNodes)
                if(newNodes.length !== 0) { // If there are new nodes added
                    console.log('create')
                }
                if(removeNodes.length !== 0) { // If there are new nodes added
                    console.log('remove')
                    console.log(removeNodes[0])
                }
            });
        });

使用DOMSubtreeModified变异事件。在jQuery中

3 个答案: