jQuery如何监听DOM元素的变化？

Question

我有一个ajax回调函数，它将html标记注入到一个页脚div中。

我无法想出一种方法来监视这个div何时发生内容更改。将我正在尝试创建的布局逻辑放在回调函数中不是一个选项，因为每个方法（回调和我的布局div处理程序）都不应该知道另一个方法。

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

我找到了一个名为“watch”的插件和该插件的改进版，但始终无法触发任何插件。我尝试“监视”我能想到的一切（例如通过ajax注入改变div的高度属性），但无法使它们起作用。

有什么想法/帮助吗？

- jas

---

你使用什么方法来注入内容？ - outis

在这里，我正在使用jQuery Layout插件。在西侧窗格中，我有一个内容div和页脚div。布局在ajax调用之前初始化，因此该窗格的内容面板占据了窗格高度的100％。如果存在比空间更多的行，则我的成功回调知道通过其id在页脚div中创建分页pager... var success = function(data) { $(divid).paginate(options);... }。但它不知道它在一个布局对象中。我需要以某种方式触发layout.resizeContent（“west”） ，但不想在回调中硬编码jQuery UI Layout逻辑。 - jas

Answer 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检查。

还要注意的是，当设置为HTML字符串（例如'<p>Hello, world</p>'）时，事件将始终触发。而对于纯文本字符串，事件只有在更改时才会触发。

- Courtney Christensen

---

值得注意的是，DOMSubtreeModified 技术上已经被弃用。看起来 DOM4 将来会提供一个可行的替代方案。参见: https://dev59.com/0mw15IYBdhLWcg3wWqj- - Courtney Christensen

Answer 2

你可以绑定DOMCharacterDataModified来监听DOM元素（例如你的div）的变化，chrome测试通过但在IE上不起作用，请查看这里的演示。
点击按钮会改变被监视的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');

在这里查看工作演示

- Scoobler

Answer 3

有一个非常不错的JavaScript库，叫做mutation-summary，是由Google开发的，可以让您简洁地观察DOM更改。最好的一点是，如果您想要，您只能被告知在DOM中实际造成了差异的操作，为了理解我的意思，您应该观看该项目主页上非常详细的视频。

链接： http://code.google.com/p/mutation-summary/ jquery包装器： https://github.com/joelpurra/jquery-mutation-summary

- Ricardo Freitas

Answer 4

如果您需要在Firefox/Opera/Safari上使用DOMNodeInserted事件，在IE上则需要使用onpropertychange事件。利用这些事件可能并不难，但可能需要一些hack技巧。以下是一些JavaScript事件文档：http://help.dottoro.com/larrqqck.php

- ornerylawn

Answer 5

现在我们可以使用一个 MutationObserver ；嗯，显然我们必须使用它。

已弃用Mutation事件的使用。请改用MutationObserver。 jquery.min.js:2:41540

来自https://developer.mozilla.org/zh-CN/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();

- yPhil