jquery - jQuery检测元素注入

Question

是否有功能可以检测是否对 DOM 进行了新元素注入？而不是在我的 ajax 调用之后不断检查是否有像这样注入的新图像：

$.ajax({
    ...
    ...
    success: function(data) {
        $('.content').replaceWith(data);
        if ($(data).find('img').length) alert('New images found!');
    }
});

我希望有一个功能可以检查是否将新图像添加到 DOM。例子：

$('img').injected(function() {
    console.log('Found new images: ' + this);
});

Answer 1

您可以通过突变观察器检测 DOM 更改。由于我不知道您的标记，我将使用通用元素。.injectedElementParent是您要注入的父级img。

// select the target node
var target = document.querySelector('.injectedElementParent');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });    
});

// 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);