我有一个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> <!-- 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的大小将会改变，那么您可以使用跨浏览器调整大小事件。
使用Javascript MutationObserver:
// Select the target node.
var target = document.querySelector('mydiv')
// Create an observer instance.
var observer = new MutationObserver(function(mutations) {
console.log(target.innerText);
});
// Pass in the target node, as well as the observer options.
observer.observe(target, {
attributes: true,
childList: true,
characterData: true
});
详情请参阅MDN文档;这应该适用于几乎所有当前的浏览器，包括IE11。
试试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>
domsubtremodified不是一个好的解决方案。如果您决定在事件处理程序中更改DOM，它可能会导致无限循环，因此它在许多浏览器中已被禁用。MutationObserver是更好的答案。
MDN医生
const onChangeElement = (qSelector, cb)=>{
const targetNode = document.querySelector(qSelector);
if(targetNode){
const config = { attributes: true, childList: false, subtree: false };
const callback = function(mutationsList, observer) {
cb($(qSelector))
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
}else {
console.error("onChangeElement: Invalid Selector")
}
}
你可以这样使用它，
onChangeElement('mydiv', function(jqueryElement){
alert('changed')
})
尝试了上面给出的一些答案，但这些火灾发生了两次。如果你需要的话，这里有一个工作解决方案。
$('mydiv').one('DOMSubtreeModified', function(){
console.log('changed');
});
推荐文章
- HTML5文本区域占位符不出现
- 我如何捕捉Ajax查询后错误?
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)
- 在window.setTimeout()发生之前取消/终止
- 检测当用户滚动到底部的div与jQuery
- 检测视口方向，如果方向是纵向显示警告消息通知用户的指示
- 禁用从HTML页面中拖动图像
- Jquery停止子事件触发父事件
- 使函数等待元素存在
- 我如何从一个URL获得片段标识符(哈希#后的值)?
- 将JS对象转换为表单数据
- 多模态叠加
- 如何从函数中禁用jQuery对话框中的按钮?
- 如何检查jQuery插件是否已加载?
- 与evt.preventDefault()相反的是什么?
