0

Estou com um problema na chamada da função replaceWith do JQuery.

Eu tenho uma variável que está armazenando uma estrutura HTML, essa estrutura eu quero renderizar em vários lugares diferentes (isso funciona quando mando substituir varios blocos de uma vez), quando faço a troca usando o replaceWith pela segunda vez, ele apaga o lugar onde fiz a troca pela primeira vez, e assim sucessivamente.

Como faço para substituir o conteúdo em outro lugar, sem apagar onde já tem?

Obs: não posso fazer a troca em vários lugares de uma vez, tenho que fazer em elemento por elemento.

Exemplo:

<div class="bloco1"></div>
<div class="bloco2"></div>

<div id="conteudo">Isso deve ir para todas as DIVs</div>

<script>
    $('.bloco1').replaceWith($('#conteudo'));
    $('.bloco2').replaceWith($('#conteudo'));
</script>

Ao executar o bloco do script, fica apenas uma div com o texto.

1 Resposta 1

2

Clone o elemento.

Se você passar um elemento como parâmetro para o método replaceWith, o método irá mover o elemento para o novo local do DOM.

Se a ideia era criar um novo elemento igual ao passado como parâmetro, e manter o original em seu lugar, então crie um novo elemento usando o original como base e passe ele como parâmetro para o método:

$('.bloco1').replaceWith($('#conteudo').clone());
$('.bloco2').replaceWith($('#conteudo').clone());
2
  • Isso resolvel um problema mas gerou outro, os blocos não estão copiando os eventos aplicados nos objetos. Commented 27/09/2020 às 15:55
  • Realmente, listeners de eventos não fazem parte do elemento. Se você precisa que os clones dos elementos possuam os mesmos listeners, terá que aplicar os listeners neles também, ou então utilizar event-delegation. Se tiver duvidas, faça uma nova pergunta.
    – Andre
    Commented 27/09/2020 às 16:05

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 .