I've an element which I clone, there are some simple jQuery events/functions on them like a click action (I've set a log.console in this function) to do some small actions.

When I clone the element, it seems my jquery functions won't work anymore on the cloned element (real element still find).

Is there an reason for the behavior, and how can I solve this?

(update)

My clone, and my remove button. I've added true in the clone function but still nothing is happening.

    $('.clone-row').click(function() {

        var row = $(this).prev().prev();
        $(row).clone(true, true).append('<span class="remove">remove</span>').hide().appendTo('.clones').css('opacity', 0).slideDown(350).animate({ opacity: 1 },{ queue: false, duration: 'slow' });

    });
    // clone works fine..

    $('.remove').click(function(){

        console.log('remove');

    });
    // nothing happens

Many thanks!

I've an element which I clone, there are some simple jQuery events/functions on them like a click action (I've set a log.console in this function) to do some small actions.

When I clone the element, it seems my jquery functions won't work anymore on the cloned element (real element still find).

Is there an reason for the behavior, and how can I solve this?

(update)

My clone, and my remove button. I've added true in the clone function but still nothing is happening.

    $('.clone-row').click(function() {

        var row = $(this).prev().prev();
        $(row).clone(true, true).append('<span class="remove">remove</span>').hide().appendTo('.clones').css('opacity', 0).slideDown(350).animate({ opacity: 1 },{ queue: false, duration: 'slow' });

    });
    // clone works fine..

    $('.remove').click(function(){

        console.log('remove');

    });
    // nothing happens

Many thanks!

• javascript
• jquery
• click
• clone

• 1 Use $element.clone(true, true); from stackoverflow./questions/9549643/… – lmgonzalves Commented Jun 11, 2015 at 16:04

2 Answers 2

You need to use the .clone( [withDataAndEvents ] [, deepWithDataAndEvents ] ):

$.clone( true, true )

A Boolean indicating whether event handlers and data should be copied along with the elements.

By default, this is false!

change

 $(element).click(handler);

to

 $(element).on("click",handler);