Jquery detect element injection

Question

Is there a function to detect if a new element injection has been made to the DOM? Instead of constantly checking after my ajax call to see if there's new images injected like so:

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

I was hoping there's a function out there that exists to check if new images was added to the DOM. Example:

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

Possible duplicate : http://stackoverflow.com/questions/4765768/jquery-run-a-function-when-dom-changes — PeterFour, May 16 '13 at 08:24
Possible duplicate: http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery — slinky2000, May 16 '13 at 09:08

score 0 · Answer 1 · answered May 16 '13 at 09:32

You can detect DOM changes trough mutation observers. As I do not know your markup I'll go with a generic elements. .injectedElementParent is the parent where you want to inject the 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);

I get "TypeError: Value not an object." for "var config = { ... }" line — user1105430, May 17 '13 at 06:59

Jquery detect element injection

1 Answers1