jquery append() element click event

Question

I have two ul tags here is jsbin link

and my script is

$("#to-do li").click(function(){
    alert("I'm to-do li");
    $(this).appendTo("#done");
});

$("#done li").on('click', function(){
    // this event is not fired
    alert("I'm done li");
    $(this).appendTo("#to-do");
});

and requirement is on click of "to-do li" , it should append to "done li" and Vice-versa.

first function is working fine as expected. But the second one is not fired at all. on click of "#done li", again first function is calling. please help on..

1)why ("#to-do li") event is firing on click of $("#done li"). 2)how to achive this

Answer 1

Since you are dealing with dynamic element structure you need to make use of event delegation

$('#to-do').on('click', "li", function () {
    console.log("I'm to-do li");
    $(this).appendTo("#done");
});

$('#done').on('click', "li", function () {
    // this event is not fired
    console.log("I'm done li");
    $(this).appendTo("#to-do");
});

Demo: Fiddle