Trigger function after
element is added with jQuery?

Question

I have an html ul list and a button add that creates new li elements. What i need is to call a function after the new li element is created but i'm facing the problem that the click event (or what ever it does) of the button with the function to add the new li element is unaccessible to me, so the only way i can access is thru a new event bind to the button.

If i create a new bind event to the button, i can't make anything because the event is fired before the new li is created.

$addButton.bind("click", myFunction);

So what i need is something that can detect that the new li was added to the main ul. What's the best approach?

And i repeat just in case... i can't access the function that creates the li element.

[This question might help.](https://stackoverflow.com/questions/10415400/jquery-detecting-div-of-certain-class-has-been-added-to-dom) — , Jan 21 '16 at 18:32
Again i say... i can't access the function that adds the `li` element so i don't know what you are asking — Phoenix_uy, Jan 21 '16 at 18:33

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

You can use the DOMNodeInserted event.

$('#list').on('DOMNodeInserted', 'li', function(e) {
    console.log(e);
});

It will fire for each new li element added to your list.

Fiddle: https://jsfiddle.net/x7po0dwe/

IE > 9

UPDATE:

I recommend this solution instead of mine: https://stackoverflow.com/a/10343915/1516112

edited May 23 '17 at 12:22

Community

1
1

answered Jan 21 '16 at 18:38

nikoskip

1,860
1
21
38

score 1 · Answer 2 · answered Jan 21 '16 at 18:42

1

You can capture the li creation with a looping function that is fired on clicking that button like this:

$("#my_btn").click(function(){
    lis = $('li').length;
    check_creation = function(){

        setTimeout(function(){
            if(lis == $('li').length){
                //make another loop
                check_creation();
            }else{
                //Do what is necessary
            }
        }, 50);
    }
    check_creation();
});

answered Jan 21 '16 at 18:42

Tariq

2,853
3
22
29

This has worked for me but my question is what are the possible consecuences of this approach? – Phoenix_uy Jan 22 '16 at 04:01
1

This suppose to work always. This solved a case like yours when there are another function that runs with your function. you delay your function until the li is inserted. that's all. If this helps, please rank the answer. – Tariq Jan 22 '16 at 04:28
I know it fix the problem, i was just asking about performance and best practices about this method. – Phoenix_uy Jan 22 '16 at 14:04

Nikolay Ermakov · Answer 3 · 2016-01-22T14:37:34.097

Expanding on @nikoskip hint you can add a MutationObserver object to listen to changes in your ul. You would add this when you already have your ul in the DOM, so better place it in DOM ready event.

Check demo: Fiddle

// create new MutationObserver object and pass callback to execute if mutation happens
var observer = new MutationObserver(function(MutationRecord) {
    // get array of added li objects, use MutationRecord[0].addedNodes[0] for a single one
    var newLiAdded = MutationRecord[0].addedNodes;
    // ... code you want to execute after li was added
});

// specify what element to watch for mutations
var target = document.querySelector('#yourUlId');

// specify what mutation to watch
var config = {
    childList: true 
};

// start watching
observer.observe(target, config);

Check further: Mozilla API

Trigger function after element is added with jQuery?

3 Answers3

Trigger function after
element is added with jQuery?