1

Boa noite pessoal, estou aprendendo JavaScript e resolvi criar esse layout para testar alguns conhecimentos, criei uma tabela e um modal para adicionar usuários a tabela.

Estou criando a parte de editar os usuários, e para isso, cada usuário inserido na tabela tem um botão de editar, então pensei em adicionar um evento de click para que quando o usuário clicar no botão de editar, ele possa executar as regras que preciso.

O problema que estou tendo é o seguinte, ele adiciona o evento de clique normalmente, só que a cada novo usuário inserido na tabela, ele está duplicando o evento de click, e isso não pode ocorrer.

No exemplo abaixo, tenho 3 usuários inseridos, e quando cliquei no botão de editar no primeiro usuário, ele disparou o evento de click 3 vezes.

erro

O código que fiz para testar é esse, onde possui um método chamado editUser:

editUser() {
    let editButton = [...document.querySelectorAll('[data-edit]')];
    editButton.forEach((element) => {
        element.addEventListener('click', () => {
            console.log('Cliquei!');
        });
    });
}

Esse dataset chamado data-edit ele está presente em todos os botões de editar, uso ele para localizar esses botões e aplicar o evento de clique.

Gostaria muito de resolver esse problema tentei contornar por esse outro meio mas não funcionou:

editUser() {
    let fn = (event) => {
        console.log('Cliquei', event);
    }

    let arr = [];
    for (let i of [...document.querySelectorAll('[data-edit]')]) {
        arr.push(i);
    }

    for (let i of arr) {
        i.addEventListener('click', fn);
    }

    for (let i of arr) {
        i.removeEventListener('click', fn);
    }

    for (let i of arr) {
        i.addEventListener('click', fn);
    }

}

Acredito que o problema seja que esse método, está sendo chamado sempre que adiciona um novo usuário na tabela, mas não consegui contornar esse problema, alguém poderia me ajudar? desde já agradeço.

Caso alguém quiser o código aqui está: hmtl: https://pastebin.com/vRK6XhZj index: https://pastebin.com/m42pj29S Código da class: https://pastebin.com/33WXMaZ6

4
  • 1
    o problema é esse seletor document.querySelectorAll('[data-edit]') que vai sempre pegar todos os elemento novamente, precisa associar o evento somente para o novo elemento que foi adicionado, ou faça o removeEventListener antes para remover todos os eventos antes de associar novos 14/10/2019 às 23:28
  • @RicardoPontual obrigado, eu até suspeitava que era isso, pois a cada novo usuário estava repetindo o mesmo evento, enfim, pensei em outra abordagem e parece ter dado certo, fiz o seguinte, fiz a localização dos elementos pelo id, e salvei a localização deles em um array, após isso usei o método forEach() para percorrer cada elemento, e usei o condicional IF para verificar se aquele elemento possui um dataset chamado editar se possuir faça nada, se não possuir crie esse dataset e adicione o evento de click nesse elemento.
    – Magno
    15/10/2019 às 1:58
  • 1
    parece uma boa ideia. Eu vou até sugerir outra: no addUser, quando for gerar o html pode colocar um id num um numero sequencial no buttom com o data-edit, dai após fazer o append da tr, pode associar o evento click nesse botão que já tem id, sem precisar chamar editUser. Ou até mais simples, fazer o seletor a partir da tr, pois só vai encotrar o botão novo, assim: tr.querySelector('[data-edit]'), parece simples :) 15/10/2019 às 9:50
  • @RicardoPontual show, muito obrigado pelas alternativas e por ter dado essa força ai vlw.
    – Magno
    15/10/2019 às 16:17

0

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

Pesquise outras perguntas com a tag .