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) ;
    }) ;

Bashuk

Answer 1

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.

Simone

How to achieve the same results in vanilla js? – Eyespot

Answer 2

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/

Rusty

I used your code, but nothing seems to happen. Is there a particular jQuery version that supports this ON function? I am using 1.9 and above? Thanks – Bashuk

@twimB My apologies, I've updated my code, forgot $(document).on(), along with a fiddle of it working. – Rusty

Apparently it doesn't work in Opera. It does work in chrome. Many thanks. – Bashuk

Answer 3

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>') ;
}) ;

Spreadeagle

Answer 4

When you have multiple div and multiple classes inside your page, it may be trouble to call correct div. I found and fixed it via adding the id to the div , and jquery loves find by id and its fast too. You can use.

$(document).on('click touchstart', 'div#the_id div.the_class', function(){
 //yourcode
}

Hebraist