我有一个div,它的内容一直在变化,是ajax请求,jquery函数,模糊等。

是否有一种方法可以在任何时间点检测我的div上的任何变化?

我不想使用任何间隔或默认值检查。

这样就可以了

$('mydiv').contentchanged() {
 alert('changed')
}

当前回答

下面的代码为我工作:

$("body").on('DOMSubtreeModified', "mydiv", function() {
    alert('changed');
});

其他回答

使用MutationObserver,详见Mozilla提供的片段,并改编自这篇博客文章

或者,您也可以使用本链接中的JQuery示例

找到了,Chrome 18+,火狐14+

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

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

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var 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
var observer = new MutationObserver(callback);

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

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

您正在寻找突变观察者或突变事件。它们既没有得到任何地方的支持,也没有被开发人员世界过于钟爱。

如果您知道(并且能够确保)div的大小将会改变,那么您可以使用跨浏览器调整大小事件。

这个问题没有内在的解决方案,这是你的设计和编码模式的问题。

您可以使用发布者/订阅者模式。为此,您可以使用jQuery自定义事件或自己的事件机制。

首先,

function changeHtml(selector, html) {
    var elem = $(selector);
    jQuery.event.trigger('htmlchanging', { elements: elem, content: { current: elem.html(), pending: html} });
    elem.html(html);
    jQuery.event.trigger('htmlchanged', { elements: elem, content: html });
}

现在你可以订阅divhtmlchanging/divhtmlchanged事件,如下所示,

$(document).bind('htmlchanging', function (e, data) {
    //your before changing html, logic goes here
});

$(document).bind('htmlchanged', function (e, data) {
    //your after changed html, logic goes here
});

现在,您必须通过这个changeHtml()函数更改div内容更改。因此,你可以监视或相应地做必要的更改,因为绑定回调数据参数包含信息。

你必须像这样更改div的html;

changeHtml('#mydiv', '<p>test content</p>');

而且,除了input元素,你可以将它用于任何html元素。无论如何,您可以修改它以用于任何元素。

Adding some content to a div, whether through jQuery or via de DOM-API directly, defaults to the .appendChild() function. What you can do is to override the .appendChild() function of the current object and implement an observer in it. Now having overridden our .appendChild() function, we need to borrow that function from an other object to be able to append the content. Therefor we call the .appendChild() of an other div to finally append the content. Ofcourse, this counts also for the .removeChild().

var obj = document.getElementById("mydiv");
    obj.appendChild = function(node) {
        alert("changed!");

        // call the .appendChild() function of some other div
        // and pass the current (this) to let the function affect it.
        document.createElement("div").appendChild.call(this, node);
        }
    };

在这里您可以找到一个naïf示例。我想你们可以自己扩展。 http://jsfiddle.net/RKLmA/31/

顺便说一下:这表明JavaScript遵循openclose原则。:)

您可以将div的旧innerHTML存储在一个变量中。设置检查旧内容与当前内容是否匹配的时间间隔。如果这不是真的,那就做点什么。