37

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

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

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

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

有什么想法/帮助吗？

4

5 回答 5

51

我发现最有效的方法是绑定到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>'才会触发。

于 2012-03-23T19:42:28.993 回答
7

您可以通过绑定到DOMCharacterDataModified来监听 DOM 元素的更改（例如您的 div ）拿出另一个 div 来向你展示它的工作原理......

多看一下Shiki对jquery 的回答，听听 div 内的变化并采取相应的行动，看起来它应该做你想做的事：

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

在更新 div 的函数中：

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

在此处将其视为工作演示

于 2011-03-28T14:02:15.703 回答
5

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

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

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

于 2012-08-14T11:34:29.330 回答
3

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

于 2009-12-25T11:20:36.590 回答
0

现在我们可以使用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();
于 2021-08-15T08:54:07.060 回答