12

我在我的页面上使用了以下 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>
4

3 回答 3

18

好吧，这可能不是一个合适的答案，因为问题是关于Mutation-events，下面发布的是使用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();
于 2014-08-01T15:34:01.330 回答
17

看起来在 Firefox 中，调用.slideToggle()触发了DOMSubtreeModified事件，而这在 Chrome 中没有发生。所以基本上在 Firefox 中，一些东西最初会触发绑定你的点击处理程序的事件。在这一点上一切都很好。然后，当您继续单击时，slideToggle会按预期发生。但是，这会触发 DOMSubtreeModified 事件，然后您会得到两个 click 事件处理程序，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 中。

于 2014-08-01T15:03:20.840 回答
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 old nodes
                    console.log('remove')
                    console.log(removeNodes[0])
                }
            });
        });
于 2021-06-24T16:23:38.870 回答