我有一个div,它的内容一直在变化,是ajax请求,jquery函数,模糊等。

是否有一种方法可以在任何时间点检测我的div上的任何变化?

我不想使用任何间隔或默认值检查。

这样就可以了

$('mydiv').contentchanged() {
 alert('changed')
}

当前回答

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').bind('DOMNodeInserted DOMNodeRemoved', function() {

});

但这在ie浏览器中可能行不通,我还没测试过

如果你不想使用定时器和检查innerHTML,你可以尝试这个事件

$('mydiv').on('DOMSubtreeModified', function(){
  console.log('changed');
});

更多细节和浏览器支持数据在这里。

您可以将div的旧innerHTML存储在一个变量中。设置检查旧内容与当前内容是否匹配的时间间隔。如果这不是真的,那就做点什么。

这个问题没有内在的解决方案,这是你的设计和编码模式的问题。

您可以使用发布者/订阅者模式。为此,您可以使用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元素。无论如何,您可以修改它以用于任何元素。

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')
})