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!
Share Improve this question edited Jun 11, 2015 at 20:06 directory asked Jun 11, 2015 at 16:03 directorydirectory 3,1678 gold badges48 silver badges86 bronze badges 1-
1
Use
$element.clone(true, true);from stackoverflow./questions/9549643/… – lmgonzalves Commented Jun 11, 2015 at 16:04
2 Answers
Reset to default 9You 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);