2

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!

directory
  • 3,093
  • 8
  • 45
  • 85
  • 1
    Use `$element.clone(true, true);` from http://stackoverflow.com/questions/9549643/jquery-clone-not-cloning-event-bindings-even-with-on – lmgonzalves Jun 11 '15 at 16:04

2 Answers2

9

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!

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • Thank you for this answer, I've tried to edit the clone with these changes but still nothing happens. I've updated my post with the clone/remove code – directory Jun 11 '15 at 20:06
0

change

 $(element).click(handler);

to

 $(element).on("click",handler);
mgündüz
  • 16
  • 3