jQuery事件:检测对div的html /文本的更改

Question

我有有它的所有内容改变时间一个div,无论是ajax requests,jquery functions,blur等等等等.

有没有办法可以在任何时间点检测到我的div上的任何变化？

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

像这样的东西会做

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

Answer 1

如果您不想使用计时器并检查innerHTML,您可以尝试此事件

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

更多细节和浏览器支持数据在这里.

注意:在较新的jQuery版本中,不推荐使用bind(),因此您应该使用on()代替:

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

Answer 2

由于$("#selector").bind()不推荐使用,您应该使用:

$("body").on('DOMSubtreeModified', "#selector", function() {
    // code here
});

Answer 3

你可以试试这个

$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

但这可能不适用于Internet Explorer,尚未测试过

Answer 4

使用Javascript MutationObserver

  //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
 // select the target node
var target = document.querySelector('mydiv')
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  console.log($('mydiv').text());   
});
// 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);

Answer 5

您正在寻找MutationObserver或Mutation Events.既没有在任何地方得到支持,也没有被开发者世界过于喜爱地看待.

如果你知道(并且可以确定)div的大小会改变,你可以使用crossbrowser resize事件.

Answer 6

以下代码适合我.

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

希望它会帮助别人:)

Answer 7

没有针对此问题的内置解决方案,这是您的设计和编码模式的问题.

您可以使用发布者/订阅者模式.为此,您可以使用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>');

此外,您可以将此用于除输入元素之外的任何html元素.无论如何,你可以修改它以使用任何元素.

Answer 8

使用MutationObserver,如Mozilla提供的此片段中所示,并改编自此博客文章

或者,您可以使用此链接中显示的JQuery示例

Chrome 18 +,Firefox 14 +,IE 11 +,Safari 6+

// 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();

Answer 9

尝试了上面给出的一些答案，但这些火灾发生了两次。如果您可能需要相同的解决方案，这是可行的解决方案。

$('mydiv').one('DOMSubtreeModified', function(){
    console.log('changed');
});