Why doesn't click work on appended elements?

Question

I would like to move some html elements from one container to another endlessly using jQuery append function but, the click event won't fire no more when I click on the element/s that have been appended.

Based on some threads similar to mine I found out that appended elements are stripped off of their event listeners. How can I avoid that, can someone show a solution ?

Here is the: Fiddle

    $('section.container-A div.elem').click(function() {
        $('section.container-B').append(this) ;
    }) ;

    $('section.container-B div.elem').click(function() {
        $('section.container-A').append(this) ;
    }) ;

Answer 1

You need to use the .on() method:

$(document).on('click', 'section.container-1 div.elem', function() {
    var html = this;
    $('section.container-2').append(html) ;
}) ;

$(document).on('click', 'section.container-2 div.elem', function() {
    var html = this;
    $('section.container-1').append(html) ;
}) ;

Fiddle: http://jsfiddle.net/x2A7n/16/

Answer 2

I tried it here and it worked..

Here is the code, hope it helps.

$('section.container-1 div.elem').click(function() {     
    var a = $(this).text();     
    $('section.container-2').append('<div class=\'elem\'>' + a + '</div>') ;
}) ;

$('section.container-2 div.elem').click(function() {
    var a = $(this).text();
    $('section.container-1').append('<div  class=\'elem\'>' + a + '</div>') ;
}) ;

Answer 3

It will work. Use the following method for appended.

 $(document).on('click', 'section.container-A div.elem', function() {
        $('section.container-B').append(this) ;
 }) ;

Explanation of the problem,

Doing the following,

$("span").click(function(){

An event handler is attached to all span elements that are currently on the page, while loading the page. You create new elements with every click. They have no handler attached. You can use

$(document).on('click', 'span.class', function(...

That will handle the clicks on the new elements as well.