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

Optimus Prime · Accepted Answer · 2013-08-09T19:07:17.673

32

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.

edited Aug 09 '13 at 19:07

answered Aug 09 '13 at 18:58

Optimus Prime

6,817
5
32
60

How to achieve the same results in vanilla js? – devzakir Oct 27 '21 at 02:52

Willem Ellis · Answer 2 · 2013-08-09T19:05:19.647

4

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/

edited Aug 09 '13 at 19:05

answered Aug 09 '13 at 18:57

Willem Ellis

4,886
7
38
55

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 – user9349193413 Aug 09 '13 at 19:02
@twimB My apologies, I've updated my code, forgot `$(document).on()`, along with a fiddle of it working. – Willem Ellis Aug 09 '13 at 19:05
1

Apparently it doesn't work in Opera. It does work in chrome. Many thanks. – user9349193413 Aug 09 '13 at 19:07

Vitap Ramdevputra · Answer 3 · 2013-08-09T19:44:22.090

1

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

edited Aug 09 '13 at 19:44

answered Aug 09 '13 at 19:30

Vitap Ramdevputra

160
10

score 0 · Answer 4 · answered Feb 23 '20 at 06:54

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
}

Why doesn't click work on appended elements?

4 Answers4

Linked