Run function after .append

Question

I'm having the following html code:

<div>
   <div id="a"></div>
</div>

When the div with id="a" is clicked, I want to replace this div with the following div:

<div id="b"></div>

I managed to create the following fiddle: http://jsfiddle.net/ucant5uy/ In this fiddle, you can see that the first function (#a is clicked) runs perfect, but the second function (#b is clicked) doesn't run, because the div #b doesn't exist when the page is loaded.

Then I decided to put the second function inside the first function: http://jsfiddle.net/ucant5uy/2/. As you can see, you can click #a once, and #b once, and then the code stops working. I want to be able to click #a and #b as many times as I would like to. I know you can achieve this with some simple CSS tricks (adding both divs to the HTML and using display:none;), but I'm wondering wether it's possible to achieve the same thing using .append().

Thanks in advance!

This sort of question has been asked a thousand times. You can easily find an answer here on stackoverflow. That method is commonly called *"Event delegation"*. — Karl-André Gagnon, Mar 30 '15 at 18:42
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Mar 30 '15 at 18:45
How is a question like this which has so many other predecessors , getting this many upvotes?!!! Just curious — Sai, Mar 30 '15 at 19:01

nicael · Accepted Answer · 2015-03-30T18:38:51.177

You should bind the function to the parent div (and it is as main), which exist in the DOM and will exist, otherwise you can assign the function only to the elements, which already exist in DOM.

$(document).ready(function() {
        $('#main').on("click","#a",function() {
            $(this).parent().append('<div id="b"></div>');
            $(this).remove();
        })
        
        $('#main').on("click","#b",function() {
            $(this).parent().append('<div id="a"></div>');
            $(this).remove();
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    <div id="a"></div>
</div>

Thanks, works smoothly. I'll 'check' your answer in 11 minutes (because stackoverflow won't let me 'ckeck' it right now) — Martijn Zwanenburg, Mar 30 '15 at 18:38

score 2 · Answer 2 · answered Mar 30 '15 at 18:40

use .on() for future elements event handler

$("div").on('click','div#b',function() {

        $(this).parent().append('<div id="a"></div>');
        $(this).remove();
    })

Demo:

$(document).ready(function() {
     $("div").on('click','div#a',function() {
        $(this).parent().append('<div id="b"></div>');
        $(this).remove();
    })
    
    $("div").on('click','div#b',function() {
       
        $(this).parent().append('<div id="a"></div>');
        $(this).remove();
    })
});

div {
    width:200px;
    height:200px;
    background:red;
}

#a, #b {
    width:100px;
    height:100px;
}

#a {
    background-color:green;
}

#b {
    background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div id="a"></div>
</div>

Run function after .append

2 Answers2