Skip to main content
adicionou 23 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

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. 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).

Mas me parece um trabalho desnecessário ter que adicionar o evento toda hora, pois 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 evento, pode ser mais simples usar event delegation).

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.

adicionou 611 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

Solução não tão boaAlternativa

Uma solução pior e mais trabalhosaalternativa é adicionar o listener no novo elemento. Em vez de criar o elemento como uma string, pode ser feito assim:

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 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 evento, pode ser mais simples usar event delegation).

Solução não tão boa

Uma solução pior e mais trabalhosa é adicionar o listener no novo elemento. Em vez de criar o elemento como uma string, pode ser feito assim:

Mas me parece um trabalho desnecessário ter que adicionar o evento toda hora, pois 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.

Alternativa

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

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 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 evento, pode ser mais simples usar event delegation).

adicionou 362 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170
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 = '';            
        app.insertAdjacentHTML('beforeend', newButton);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.

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.insertAdjacentElementappendChild('beforeend', 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>
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.insertAdjacentElementappendChild('beforeend', 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>
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 = '';            
        app.insertAdjacentHTML('beforeend', 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.

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.insertAdjacentElement('beforeend', novo);
}

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

button.addEventListener('click', removeBotaoCriaOutro);
<div class="app">
  <button class="btn">Clique-me</button>  
</div>
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.insertAdjacentElement('beforeend', novo);
}

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

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

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>
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>
adicionou 7 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170
Carregando
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170
Carregando