Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Evento click não funciona

function insereLinha(){

    var competidor = "Matheus";
    var qtdCaracteres = $("#qtdCaracteresTxtArea").text();
    var qtdPalavras = $("#qtdPalavrasTxtArea").text();
    var placar = $(".placar");
    var corpoTabela  = placar.find("tbody");
    var colunaRemove = "<a href='#' class='botao-remover'>"+
                            "<i class='material-icons'>delete</i>"+
                        "</a>";
    var linha = "<tr>"+
                    "<td>" + competidor + "</td>" +
                    "<td>" + qtdPalavras + "</td>" +
                    "<td>" + qtdCaracteres + "</td>" +
                    "<td>" + colunaRemove + "</td>" +
                "</tr>";

    corpoTabela .append(linha);
}

Simplesmente não executa esse código abaixo:

$(".botao-remover").click(function(){
    console.log("Linha Removida");
});

Inspecionando o elemento tag "a" do html da página está tudo certo, gera com a classe "botao-remover" corretamente. Porém quando clico no link do ícone simplesmente não exibe no log "Linha Removida"! O que pode estar causando isso?

4 respostas

Minha estrutura html:

<section class="placar">
    <h3 class="center">Placar</h3>
    <table class="centered bordered">
        <thead>
            <tr class="center">
                <th>Competidor</th>
                <th>Palavras</th>
                <th>Caracteres</th>
                <th>Remover</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</section>
solução!

Boa tarde, Matheus! Como vai?

Em que momento vc está executando esse código abaixo?

$(".botao-remover").click(function(){
    console.log("Linha Removida");
});

Se for logo no início, então o que está acontecendo é que por não haver ainda nenhum elemento com a classe botao-remover, o Javascript não adiciona o evento pra ninguém!

Experimente fazer assmi e veja e resolve o seu problema:

function insereLinha(){

    var competidor = "Matheus";
    var qtdCaracteres = $("#qtdCaracteresTxtArea").text();
    var qtdPalavras = $("#qtdPalavrasTxtArea").text();
    var placar = $(".placar");
    var corpoTabela  = placar.find("tbody");
    var colunaRemove = "<a href='#' class='botao-remover'>"+
                            "<i class='material-icons'>delete</i>"+
                        "</a>";
    var linha = "<tr>"+
                    "<td>" + competidor + "</td>" +
                    "<td>" + qtdPalavras + "</td>" +
                    "<td>" + qtdCaracteres + "</td>" +
                    "<td>" + colunaRemove + "</td>" +
                "</tr>";

    corpoTabela .append(linha);

    $(".botao-remover").click(function(){
        console.log("Linha Removida");
    });
}

Deu certo Gabriel! Obrigado!

Mas agora estou confuso.

Todos os outros métodos pelo o que entendo até agora como atualizaTamanhoFrase() estão nessa função anônima de $(documento).ready(function()) para carregar exatamente as propriedades. Porém só essa função anônima no clique de botao-remover que não funciona. Sei que estou inserindo dinamicamente seus elementos, mas quando terminar o append, não deveria entrar novamente nela?

$(document).ready(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaCores();
    $("#btn-reiniciar").click(reiniciaJogo);
    $("#cronometro").show();
    $("#btn-reiniciar").hide();

    $("#excluir-nome-competidor").click(function(){
        $("#nome-competidor").val("");
    });

    $(".botao-remover").click(function(){
        console.log("Linha Removida");
    });
});

Não, Matheus. O $(document).ready() só é acionado no exato momento que o DOM terminou de ser carregado. Ao fazer inserções dinâmicas no DOM o $(document).ready() não é executado novamente.