8
respostas

preventDefaul( ) não funciona em items inseridos depois do load

Estou fazendo um To Do List, porém, quando eu adiciono uma nova tarefa, o preventDefault( ) não funciona e o click no link faz a página recarregar. Alguém pode me ajudar? Já procurei em vários lugares, mas não consegui encontrar uma solução. Vou deixar o trecho do código que remove e o projeto completo no github.

https://crisgon.github.io/toDoList/

https://github.com/crisgon/toDoList

var removerTarefa = document.querySelectorAll(".removerTarefa");
apagaTarefa();

function apagaTarefa(){
    for(var i=0; i<tamanho; i++){ //Loop para add o remove para cada <a> da lista
        removerTarefa[i].addEventListener("click", function(event){
            event.preventDefault();
            var paiDoElemento = this.parentNode; //Descobre qual é o pai do elemento clicado no evento
            paiDoElemento.remove(); //Remove pai do elemento
        });
    }
}
8 respostas

olhando o código realmente não parece errado... gera algum erro no console? vamos tentando achar o que pode estar acontecendo.

Não aparece nada no console, só faz recarregar a página quando clico em excluir um elemento que cadastro pelo formulário.

Cara, testei aqui sua aplicação e funcionou normal, veja:

https://www.dropbox.com/s/1pi8yihx0913ixh/todo.png?dl=0

Qual navegador está usando?

Leandro, chrome e firefox. O problema é quando tenta remover ou marcar como completa, uma tarefa que acabou de criar. As que já vem por padrão são excluídas ou marcadas sem que a página recarregue, mas quando tento com as novas a página recarrega.

Ahhh, essas novas são criadas via ajax ou algo assim? pq se for, pode ser que elas não esteja sendo associadas ao listener.

Não são criadas com ajax, uma solução seria essa? Utilizar ajax?

Não... então é estranho mesmo... pq se a página dar reload e você informou que os links que já estão lá funcionam... a não ser que os links dos novos cadastros não estejam com a classe css que está sendo filtrada ali.

Os novos items não estão escutando os eventos. Já retirei o href do e até já substitui o por outro elemento, porém nada acontece. Fiz um teste colocando um alert quando clicar no botão, mas só funciona com os que estão diretamente no HTML, não funcionam com os novos cadastrados.