jQuery 监视 domElement 的变化？答案

【问题标题】：jQuery watch for domElement changes?jQuery 监视 domElement 的变化？
【发布时间】：2009-12-25 10:15:29
【问题描述】：

我有一个将 html 标记注入页脚 div 的 ajax 回调。

我想不通的是如何创建一种方法来监视 div 的内容何时发生变化。将我试图创建的布局逻辑放在回调中不是一个选项，因为每个方法（回调和我的布局 div 处理程序）不应该知道另一个。

理想情况下，我希望看到类似于$('#myDiv').ContentsChanged(function() {...}) 或$('#myDiv').TriggerWhenContentExists( function() {...}) 的某种事件处理程序

我找到了一个名为 watch 的插件和该插件的改进版本，但都无法触发。我尝试“观看”我能想到的一切（即通过 ajax 注入更改 div 的高度属性），但根本无法让他们做任何事情。

有什么想法/帮助吗？

【问题讨论】：

你用什么方法注入内容？
在这种情况下，我使用的是 jQuery Layout 插件。在西窗格中，我有一个内容 div 和页脚 div。布局在 ajax 调用之前被初始化，因此窗格的内容面板占据了窗格高度的 100%。我的成功回调，如果存在多于空间的行，知道通过它的 id 在页脚 div 中创建一个分页寻呼机... var success = function(data) { $(divid).paginate(options);... }。但它不知道它在布局对象中。我需要触发 layout.resizeContent("west");不知何故，但不想在回调中硬连线 jQuery UI 布局逻辑。

标签： javascript jquery jquery-plugins jquery-events

【解决方案1】：

我发现最有效的方法是绑定到DOMSubtreeModified 事件。它适用于 jQuery 的 $.html() 和标准 JavaScript 的 innerHTML 属性。

$('#content').bind('DOMSubtreeModified', function(e) {
  if (e.target.innerHTML.length > 0) {
    // Content change handler
  }
});

http://jsfiddle.net/hnCxK/

当从 jQuery 的$.html() 调用时，我发现该事件触发了两次：一次是清除现有内容，一次是设置它。一个快速的.length-check 将在简单的实现中起作用。

同样重要的是要注意，当设置为 HTML 字符串（即'<p>Hello, world</p>'）时，该事件将始终触发。并且该事件只会在更改时触发纯文本字符串。

【讨论】：

可能值得注意的是，DOMSubtreeModified 在技术上已被弃用。看起来 DOM4 总有一天会提供一个可行的替代方案。见：stackoverflow.com/questions/6659662/…

【解决方案2】：

您可以通过绑定到DOMCharacterDataModified 来监听 DOM 元素的更改（例如您的 div） >单击按钮会导致正在观看的 div 发生变化，这反过来又会填充另一个 div 以向您展示它的工作...

多看一下Shiki 对jquery listen to changes within a div and act accordingly 的回答，看起来它应该做你想做的事：

$('#idOfDiv').bind('contentchanged', function() {
    // do something after the div content has changed
    alert('woo');
});

在更新 div 的函数中：

$('#idOfDiv').trigger('contentchanged');

将此视为working demo here

【讨论】：

【解决方案3】：

有一个简洁的javascript库，谷歌的mutation-summary，可以让你简洁地观察dom变化。关于它的好处是，如果您愿意，您可以仅获悉实际对 DOM 产生影响的操作，以了解我的意思，您应该观看项目主页上的信息丰富的视频。

链接： http://code.google.com/p/mutation-summary/

jquery 包装器： https://github.com/joelpurra/jquery-mutation-summary

【讨论】：

【解决方案4】：

您可能想查看 Firefox/Opera/Safari 的 DOMNodeInserted 事件和 IE 的 onpropertychange 事件。利用这些事件可能不会太难，但它可能有点hack-ish。这是一些 javascript 事件文档：http://help.dottoro.com/larrqqck.php

【讨论】：

【解决方案5】：

现在我们可以使用 MutationObserver ；好吧，显然我们必须这样做。

不推荐使用突变事件。改用 MutationObserver。 jquery.min.js:2:41540

来自https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver：

// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

【讨论】：