Tem que usar .clone(true)
como descrito na documentação: https://api.jquery.com/clone/
.clone( [withDataAndEvents ] )
Um booleano que indica se os manipuladores de eventos devem ser copiados junto com os elementos. A partir do jQuery 1.4, os dados dos elementos serão copiados também.
Exemplo:
var bar = $('.foo .bar');
bar.click(function () {
console.log(Date.now());
});
var clonado = bar.clone(true);
clonado.appendTo('.baz');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Copiado .bar de .foo para .baz:</h1>
<div class="foo">
Original: <div class="bar">Click em foo</div>
</div>
<hr>
<div class="baz">
Copiado:
</div>
Delegando eventos
Outra maneira de chegar ao resultado desejado é delegando eventos, por exemplo você define o .click
no document
, mas informa que o objeto esperado ("target") é o .baz
(exemplo apenas) e então todos elementos que forem adicionados a qualquer momento terão o evento do click, ou seja estará tudo a partir do document
, exemplo:
var bar = $('.foo .bar');
//O evento click de document será delegado para todos ".bar"
$(document).on('click', '.bar', function () {
console.log(Date.now());
});
setInterval(function () {
var clonado = bar.clone();
clonado.appendTo('.baz');
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Copiado .bar de .foo para .baz:</h1>
<div class="foo">
Original: <div class="bar">Click em foo</div>
</div>
<hr>
<div class="baz">
Copiados:
</div>