1

Tenho este código:

let app = document.querySelector('.app');
let button = document.querySelector('.btn');
let newButton = `<button class="btn">Clique-me</button>`;

button.addEventListener('click', (e)=>{
   alert('removido');
   app.innerHTML = '';
   app.insertAdjacentHTML('beforeend', newButton);
});
<div class="app">
    <button class="btn">Clique-me</button>  
</div>

Ao clicar no botão, o alert só é exibido na primeira vez.

Por que exatamente o evento não funciona de novo? Já que estou criando um elemento exatamente igual ao primeiro? E o que posso fazer para que sempre que eu adicionar tal elemento ele possa ser ouvido?

2 Respostas 2

4

Apesar do novo botão ser um elemento com a mesma tag, classe e conteúdo, ele não é o mesmo elemento, e portanto ele não tem o evento de clique que o elemento original tinha.

Veja aqui como o botão muda depois que você o remove e adiciona outro:

let app = document.querySelector('.app');
let button = document.querySelector('.btn');
let newButton = '<button class="btn">Clique-me</button>';

button.addEventListener('click', (e) => {
    // antes de remover, o botão dentro de "app" é o mesmo que "button"
    console.log(app.querySelector('button') === button); // true
    app.innerHTML = '';
    app.insertAdjacentHTML('beforeend',newButton);
    // depois de remover e adicionar outro, o botão dentro de "app" não é mais o mesmo que "button"
    console.log(app.querySelector('button') === button); // false
});
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Depois de clicar no botão, ele vai mostrar no console true (pois o botão que está dentro da div é o original) e depois false (pois o novo botão que foi inserido não é mais o mesmo elemento - ou seja, se clicar na segunda vez ele já não imprime mais nada, pois o novo botão não tem nenhum evento de clique associado).

Segundo a documentação de insertAdjacentHTML, é feito o parsing do HTML e os nós resultantes deste parsing são inseridos no DOM. O que acontece é que esses nós novos não tem nenhuma relação com os anteriores (mesmo que o conteúdo do HTML seja idêntico).


Solução

Em vez de adicionar o evento no botão, uma alternativa é usar event delegation e colocar o evento na div:

let app = document.querySelector('.app');
let button = document.querySelector('.btn');
let newButton = '<button class="btn">Clique-me</button>';

app.addEventListener('click', (e) => {
    const element = e.target; // pega o elemento que foi clicado
    // verifica se o elemento clicado é o botão que tem a classe btn
    if (element.nodeName == 'BUTTON' && element.classList.contains('btn')) {
        alert('removido');
        app.innerHTML = newButton;
    }
});
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Ou seja, o evento de clique é para toda a div (inclusive qualquer elemento dentro dela), mas no callback eu verifico se o elemento clicado é o botão. Para saber melhor como funciona o event delegation, leia aqui.

Note também que nem precisa de insertAdjacentHTML, pois antes você seta o innerHTML para a string vazia, e isso faz com que todo o conteúdo da div seja apagado (insertAdjacentHTML faz mais sentido se você quisesse manter os elementos da div e quisesse inserir o novo na posição específica, mas como a div estará vazia, não faz diferença). Sendo assim, é mais fácil simplesmente substituir o innerHTML diretamente.


Alternativa

Uma alternativa é adicionar o listener no novo elemento. Em vez de criar o elemento como uma string, pode ser feito assim:

function removeBotaoCriaOutro() {
    const novo = document.createElement('button');
    novo.classList.add('btn');
    novo.textContent = 'Clique-me';
    // *** adicionar o evento no novo botão ***
    novo.addEventListener('click', removeBotaoCriaOutro);

    alert('removido');
    app.innerHTML = '';
    app.appendChild(novo); // como o div está vazio, pode adicionar assim
}

let app = document.querySelector('.app');
let button = document.querySelector('.btn');

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Mas se quiser manter o novo botão como string, também pode ser:

function removeBotaoCriaOutro() {
    let novo = document.createElement('template');
    novo.innerHTML = '<button class="btn">Clique-me</button>';
    novo = novo.content.firstChild;
    novo.addEventListener('click', removeBotaoCriaOutro);

    alert('removido');
    app.innerHTML = '';
    app.appendChild(novo); // como o div está vazio, pode adicionar assim
}

let app = document.querySelector('.app');
let button = document.querySelector('.btn');

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Ou ainda, colocar o evento onclick na própria string:

function removeBotaoCriaOutro() {
    alert('removido');
    app.innerHTML = '<button class="btn" onclick="removeBotaoCriaOutro()">Clique-me</button>';
}

let app = document.querySelector('.app');
let button = document.querySelector('.btn');

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>

Mas me parece um trabalho desnecessário ter que adicionar o evento toda hora, pois na minha opinião, usar event delegation é uma solução bem mais simples para este caso, já que basta adicionar o evento uma vez na div e ela cuida de verificar se o elemento clicado é o botão que queremos. Desta forma, quaisquer elementos novos que forem adicionados já "ganham de graça" o event handler da div.

Mas claro que o que é "melhor" varia conforme o caso. Por exemplo, se a div tiver muitos elementos e você só quer o evento de clique em um deles, aí talvez valha a pena adicionar o evento somente no elemento específico, mas se tem vários elementos que podem ser removidos e adicionados dinamicamente e todos respondem ao mesmo evento, pode ser mais simples usar event delegation.


Eu só questiono a utilidade de remover um elemento para adicionar outro idêntico logo em seguida (se foi para fins de aprendizado, ainda vai...)

2
  • 1
    Boa resposta. Na minha opinião adicionar o evento diretamente no novo elemento é melhor e na maior parte das vezes evita testes complicados de se o target é o elemento que nós queremos, para além de garantir que não executamos handlers de click desnecessários (por exemplo areas vazias do div que não tem botões).
    – Isac
    Commented 24/11/2021 às 22:30
  • @Isac Realmente, o que é "melhor" varia muito conforme a situação e eu me referia ao caso específico. Editei para deixar isso mais claro, obrigado!
    – hkotsubo
    Commented 25/11/2021 às 11:06
0

continuei pesquisando e na comunidade em inglês encontrei algumas soluções, segue a que eu iriei usar:

let app = document.querySelector('.app');
let button = document.querySelector('.btn');
let newButton = `<button class="btn">Clique-me</button>`;

button.addEventListener('click', (e)=>{
     app.innerHTML = '';
   console.log('clear app');
   app.insertAdjacentHTML('beforeend',newButton);
   console.log('add event');
   addEvent('.btn','click'); 
});

let addEvent = (target, event) => {
    let element = document.querySelector(target);
  element.addEventListener(event, (e)=>{
    console.log('new element with event');
  });
}
<div class="app">
<button class="btn">Clique-me</button>  
</div>

Desse jeito a cada elemento que inserirmos dinamicamente já adicionaremos o evento junto! Valeu \o

1

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 .