我有一个div,其内容一直在变化,无论是ajax requests
,jquery functions
,blur
等等。
有没有办法可以在任何时间点检测到div上的任何变化?
我不想使用任何间隔或检查默认值。
这样的事情可以做到
$('mydiv').contentchanged() {
alert('changed')
}
答案 0 :(得分:358)
如果您不想使用计时器并检查innerHTML,您可以尝试此事件
$('mydiv').bind("DOMSubtreeModified",function(){
alert('changed');
});
更多详细信息和浏览器支持数据为Here。
注意:在较新的jQuery版本中,不推荐使用bind(),因此您应该使用on()代替:
$("body").on('DOMSubtreeModified', "mydiv", function() {
alert('changed');
});
答案 1 :(得分:39)
你可以试试这个
$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {
});
但这可能不适用于Internet Explorer,尚未测试
答案 2 :(得分:38)
Since $("#selector").bind()
is deprecated,你应该使用:
...{}
答案 3 :(得分:30)
您正在寻找MutationObserver或Mutation Events。既不是在任何地方都得到支持,也没有被开发者世界过于喜爱地看待。
如果您知道(并且可以确定)div的大小会发生变化,您可以使用crossbrowser resize event。
答案 4 :(得分:29)
使用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);
答案 5 :(得分:19)
以下代码适合我。
$("body").on('DOMSubtreeModified', "mydiv", function() {
alert('changed');
});
希望它会帮助某人:)
答案 6 :(得分:17)
此问题没有内置解决方案,这是您的设计和编码模式的问题。
您可以使用发布者/订阅者模式。为此,您可以使用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元素。无论如何,你可以修改它以与任何元素一起使用。
答案 7 :(得分:8)
使用MutationObserver提供的此代码段中显示的Mozilla,并改编自this blog post
或者,您可以使用JQuery示例seen in this link
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();
答案 8 :(得分:3)
您可以将div的旧innerHTML存储在变量中。设置间隔以检查旧内容是否与当前内容匹配。当这不是真的做某事。
答案 9 :(得分:1)
尝试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>
答案 10 :(得分:1)
尝试了以上给出的一些答案,但两次触发事件。如果您需要相同的解决方案,则可以使用。
$('mydiv').one('DOMSubtreeModified', function(){
console.log('changed');
});
答案 11 :(得分:0)
通过jQuery或直接通过de DOM-API向div添加一些内容,默认为.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);
}
};
在这里你可以找到一个天真的例子。我猜你可以自己扩展它。 http://jsfiddle.net/RKLmA/31/
顺便说一下:这表明JavaScript符合OpenClosed原则。 :)
答案 12 :(得分:0)
DOMSubtreeModified 不是一个好的解决方案。如果您决定更改事件处理程序内部的DOM,可能会导致 无限循环 ,因此已在许多浏览器中将其禁用。 MutationObserver 将是答案。
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')
})