我有一个div,它的内容一直在变化,是ajax请求,jquery函数,模糊等。
是否有一种方法可以在任何时间点检测我的div上的任何变化?
我不想使用任何间隔或默认值检查。
这样就可以了
$('mydiv').contentchanged() {
alert('changed')
}
我有一个div,它的内容一直在变化,是ajax请求,jquery函数,模糊等。
是否有一种方法可以在任何时间点检测我的div上的任何变化?
我不想使用任何间隔或默认值检查。
这样就可以了
$('mydiv').contentchanged() {
alert('changed')
}
当前回答
你可以试试这个
$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {
});
但这在ie浏览器中可能行不通,我还没测试过
其他回答
使用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();
由于$("#selector").bind()已弃用,您应该使用:
$("body").on('DOMSubtreeModified', "#selector", function() {
// code here
});
这个问题没有内在的解决方案,这是你的设计和编码模式的问题。
您可以使用发布者/订阅者模式。为此,您可以使用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元素。无论如何,您可以修改它以用于任何元素。
如果你不想使用定时器和检查innerHTML,你可以尝试这个事件
$('mydiv').on('DOMSubtreeModified', function(){
console.log('changed');
});
更多细节和浏览器支持数据在这里。
下面的代码为我工作:
$("body").on('DOMSubtreeModified', "mydiv", function() {
alert('changed');
});