Aula 6 - Criando um botão remover | jQuery: domine a biblioteca mais popular do mercado parte 1

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Gustavo Alves

| 144.8k xp | 26 posts

Analista Desenvolvedor Júnior

-       var botaoRemover = "<a href='#' class='botao-remover'>"+
-                                               "<i class='small material-icons'>delete</i>"+
-                                               "</a>";
-       var linha = "<tr>"+
-                                       "<td>"+usuario+"</td>"+
-                                       "<td>"+numeroPalavras+"</td>"+
-                                       "<td>"+botaoRemover+"</td>"
-                               "</tr>";

Se nós quando criamos a string do botão colocamos a classe "botao-remover", porque quando criamos um evento de click() apontando para elementos com essa classe a função não é chamada?

Eu vi que foi explicado que isso é uma string, não um elemento html, mas quando o placar é carregado, o botão está lá, e com a classe, porém o evento click() nunca é acionado.

Ps.: Eu já vi a solução no vídeo seguinte, mas não entendi porque não funcionou assim

2 respostas

solução!

por Douglas Quintanilha Barbosa Ferreira

| 363.4k xp | 215 posts

Instrutor e Desenvolvedor

14/12/2016

Olá Gustavo,

Quando fazemos:

$(".botao-remover").click(){
    $(this).parent().parent().remove();
}

Estamos selecionando todos os botoes que estão atualmente na página para poder atrelar o evento de click, e em seguida fazer a remoção. Está função é executada assim que nossa página é carregada e apenas uma vez. Assim, as linhas do placar que já estão na página conseguem ser removidas.

Agora o que acontece agora quando adicionamos um novo botão na página ao fim de um jogo, quando é inserido uma nova linha no placar ? O botão de remover desta nova linha, apesar de poder ter a classe botao-remover , ainda não tem evento de click atrelado a ele, afinal a função acima que adiciona eventos de click nos botao-remover só é chamada uma única vez quando o código é carregado. Por isso, quando clicamos neste botão que foi adicionado pelo nosso .js, ele não executa a remoção, ele ainda não tem nenhum evento atrelado a ele!

por Gustavo Alves

| 144.8k xp | 26 posts

Analista Desenvolvedor Júnior

14/12/2016

Ah sim, na funçao nova que cria a linha, nós criamos já atrelando o evento a ela, por isso que funciona!

Agora entendi tudo, muito obrigado Douglas!