jQuery事件：检测对div的html /文本的更改
我有一个div，其内容一直在改变，无论是ajax requests ， jquery functions ， blur等等。
有什么方法可以在任何时候检测我的div上的任何更改吗？
我不想使用任何间隔或默认值检查。
像这样的事情会做
$('mydiv').contentchanged() { alert('changed') }
如果你不想使用计时器并检查innerHTML，你可以尝试这个事件
$('mydiv').bind("DOMSubtreeModified",function(){ alert('changed'); });
更多细节和浏览器支持数据在这里 。
注意：在新的jQuery版本bind（）已被弃用，你可以使用on（）来代替它
你可以试试这个
$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() { });
但是这可能无法在Internet Explorer中工作，还没有testing过
您正在寻找MutationObserver或突变事件 。 开发者世界既不支持任何东西，也不被开发人员过分看好。
如果您知道（并且可以确保）div的大小会改变，您可以使用crossbrowser resize事件 。
这个问题没有内置的解决scheme，这是你的devise和编码模式的一个问题。
您可以使用发布者/订阅者模式。 为此，您可以使用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内容的变化。 因此，您可以监视或相应地进行必要的更改，因为绑定包含该信息的callback数据参数。
你必须改变你的div的html这样;
changeHtml('#mydiv', '<p>test content</p>');
而且，除了input元素外，您还可以使用它来创build任何html元素。 无论如何，你可以修改这个与任何元素一起使用。
以下代码适用于我。
$("body").on('DOMSubtreeModified', "mydiv", function() { alert('changed'); });
希望它会帮助别人:)
由于$("#selector").bind()已被弃用 ，您应该使用：
$("body").on('DOMSubtreeModified', "#selector", function() { // code here });
您可以将div的旧innerHTML存储在一个variables中。 设置时间间隔来检查旧内容是否与当前内容匹配。 当这不是事实。
使用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);
尝试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> <!-- example from Microsoft https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/dom/mutation-observers/ --> <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>
将一些内容添加到div，无论是通过jQuery还是直接通过de DOM-API，默认为.appendChild()函数。 你可以做的是覆盖当前对象的.appendChild()函数，并在其中实现一个观察者。 现在已经覆盖了我们的.appendChild()函数，我们需要借用另一个对象的函数来追加内容。 因此，我们调用其他div的.appendChild()来最终附加内容。 当然，这也是为了.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); } };
在这里你可以find一个天真的例子。 我猜你可以自己扩展它。 http://jsfiddle.net/RKLmA/31/
顺便说一下：这表明JavaScript遵循OpenClosed原则。 🙂
