我有一个div,它的内容一直在变化,是ajax请求,jquery函数,模糊等。
是否有一种方法可以在任何时间点检测我的div上的任何变化?
我不想使用任何间隔或默认值检查。
这样就可以了
$('mydiv').contentchanged() {
alert('changed')
}
我有一个div,它的内容一直在变化,是ajax请求,jquery函数,模糊等。
是否有一种方法可以在任何时间点检测我的div上的任何变化?
我不想使用任何间隔或默认值检查。
这样就可以了
$('mydiv').contentchanged() {
alert('changed')
}
当前回答
这个问题没有内在的解决方案,这是你的设计和编码模式的问题。
您可以使用发布者/订阅者模式。为此,您可以使用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元素。无论如何,您可以修改它以用于任何元素。
其他回答
您正在寻找突变观察者或突变事件。它们既没有得到任何地方的支持,也没有被开发人员世界过于钟爱。
如果您知道(并且能够确保)div的大小将会改变,那么您可以使用跨浏览器调整大小事件。
尝试了上面给出的一些答案,但这些火灾发生了两次。如果你需要的话,这里有一个工作解决方案。
$('mydiv').one('DOMSubtreeModified', function(){
console.log('changed');
});
您可以将div的旧innerHTML存储在一个变量中。设置检查旧内容与当前内容是否匹配的时间间隔。如果这不是真的,那就做点什么。
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原则。:)
你可以试试这个
$('.myDiv').bind('DOMNodeInserted DOMNodeRemoved', function() {
});
但这在ie浏览器中可能行不通,我还没测试过