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

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

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

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

这样就可以了

$('mydiv').contentchanged() {
 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();

2018-05-23 17:20:00

其他回答

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

您可以使用发布者/订阅者模式。为此，您可以使用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元素。无论如何，您可以修改它以用于任何元素。

2013-05-24 09:26:49

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

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

2013-03-27 11:51:23

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

2013-03-27 18:46:08

你可以试试这个

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

});

但这在ie浏览器中可能行不通，我还没测试过

2013-05-10 11:40:29

试试MutationObserver:

https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

浏览器支持:http://caniuse.com/#feat=mutationobserver

<html>  <head> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> // Inspect the array of MutationRecord objects to identify the nature of the change function mutationObjectCallback(mutationRecordsList) { console.log("mutationObjectCallback invoked."); mutationRecordsList.forEach(function(mutationRecord) { console.log("Type of mutation: " + mutationRecord.type); if ("attributes" === mutationRecord.type) { console.log("Old attribute value: " + mutationRecord.oldValue); } }); } // Create an observer object and assign a callback function var observerObject = new MutationObserver(mutationObjectCallback); // the target to watch, this could be #yourUniqueDiv // we use the body to watch for changes var targetObject = document.body; // Register the target node to observe and specify which DOM changes to watch observerObject.observe(targetObject, { attributes: true, attributeFilter: ["id", "dir"], attributeOldValue: true, childList: true }); // This will invoke the mutationObjectCallback function (but only after all script in this // scope has run). For now, it simply queues a MutationRecord object with the change information targetObject.appendChild(document.createElement('div')); // Now a second MutationRecord object will be added, this time for an attribute change targetObject.dir = 'rtl'; </script> </body> </html>

2016-11-21 14:58:09

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

推荐文章

最新文章

标签