I want something like:

$('.pac-container').whenAddToDom(function(){
    console.log('element with class pac-container added to DOM');
    //I want to use this added element $(this).doSomethingWithThis();
});

I want something like:

$('.pac-container').whenAddToDom(function(){
    console.log('element with class pac-container added to DOM');
    //I want to use this added element $(this).doSomethingWithThis();
});

• javascript
• jquery

• 2 Check this question. It may helpful. stackoverflow./questions/3219758/detect-changes-in-the-dom – suyesh Commented Jun 13, 2016 at 12:51
• 1 Or this question: http://stackoverflow./questions/2844565/is-there-a-javascript-jquery-dom-change-listener – Mikey Commented Jun 13, 2016 at 12:52
• Mutation Observers is what you are looking for. – Jai Commented Jun 13, 2016 at 12:54
• 1 you can listen to elements that are being appended .bind('DOMNodeInserted DOMNodeRemoved') – Roysh Commented Jun 13, 2016 at 13:01

2 Answers 2

I would wrap the elements that will be appended in a container and do something like this:

$("html").bind("DOMNodeInserted",function(){
    console.log('element with class '+$("#container > *").attr('class') +' added to DOM');
});

Here's a fiddle http://jsfiddle/PgAJT/295/

This is solution to my problem:

$(document).bind('DOMNodeInserted DOMNodeRemoved', function(element){
    if($(this).hasClass('pac-container')){
        console.log(element.target);
    }

});