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

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

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

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

这样就可以了

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

当前回答

试试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

其他回答

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

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

2013-03-27 11:51:23

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原则。：）

2013-03-27 11:58:40

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

2013-03-27 18:46:08

如果你不想使用定时器和检查innerHTML，你可以尝试这个事件

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

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

2013-04-30 04:41:36

你可以试试这个

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

});

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

2013-05-10 11:40:29

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

推荐文章

最新文章

标签