0

Oi, estou clonando um elemento via jQuery e quando clico em um item do elemento clonado o click não funciona, segue códigos de exemplo:

Clonando:

var template = $(".products .product.template").clone().prependTo($(".products")).removeClass("template");

Click no elemento:

$(".remover").click(function(e) {
    console.log("teste");
    e.stopPropagation();
    return false;
});

Essa classe remover tá dentro do template do primeiro exemplo de código (clonando).

1 Resposta 1

2

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .