1
resposta

event removePlacar com erro

Olá, bom dia!

Ao fazer a aula Adicionando eventos nas linhas do placar no final é feito o

linha.bind(".botao-remover").click(removePlacar)
function removePlacar() {
        event.preventDefault();
        $(this).parent().parent().remove();
}

Só que ao chamar a funçao removePlacar dessa maneira que ele fez no vídeo, retorna duas mensagens de err no meu console, eu entendi que seja por não termos referenciado o event dentro da function.

jquery.js:3793 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
    at removePlacar (main.js:110)
    at HTMLDocument.<anonymous> (main.js:10)
    at mightThrow (jquery.js:3508)
    at process (jquery.js:3576)
jquery.js:3784 jQuery.Deferred exception: Cannot read property 'preventDefault' of undefined TypeError: Cannot read property 'preventDefault' of undefined
    at removePlacar (http://127.0.0.1:49888/jquery/alura-typer/public/js/main.js:110:9)
    at HTMLDocument.<anonymous> (http://127.0.0.1:49888/jquery/alura-typer/public/js/main.js:10:2)
    at mightThrow (http://127.0.0.1:49888/jquery/alura-typer/public/js/jquery.js:3508:29)
    at process (http://127.0.0.1:49888/jquery/alura-typer/public/js/jquery.js:3576:12) undefined

Só que se eu faço assim ele funciona, mas primeiro pega o click do href e depois tenho que clicar de novo para eliminar a linha

function removePlacar() {
    $('.botao-remover').click(function (event) {
        event.preventDefault();
        $(this).parent().parent().remove();
    })
}

Alguma luz? Vou colar todo meu main.js abaixo:

var inputbox = $("#campo-digitacao")
var tempo = $("#contador-tempo").text();

$(document).ready(function () {
    mainText();
    iniciaContadores();
    cronometro();
    iniciaMarcador();
    $("#reiniciarJogo").click(reiniciaJogo);
    removePlacar();
})

//Contador de palavras do maintext
function mainText() {
    var frase = $(".frase").text(); // imprima o texto
    var numPalavras = frase.split(" ").length;
    var liFrase = $("#controller-frase");
    liFrase.text(numPalavras);
}

//Contador palavras do inputbox
function iniciaContadores() {
    inputbox.on("input", function () {
        var qntPalavras = inputbox.val().split(" ").length - 1;
        $("#contador-palavras").text(qntPalavras);
        $("#contador-caracteres").text(inputbox.val().length);
    })
}

//Contador de tempo
function cronometro() {
    var tempoinicial = $("#contador-tempo").text();
    inputbox.one("focus", function () {
        var id = setInterval(function () {
            tempoinicial--;
            $("#contador-tempo").text(tempoinicial);
            if (tempoinicial < 1) {
                clearInterval(id);
                finalizaJogo();
            }
        }, 1000)
    });
}

function finalizaJogo() {
    inputbox.attr("disabled", true);
    inputbox.addClass("campo-disabled");
    inserePlacar();
}

//seleciona botao reiniciar
function reiniciaJogo() {
    inputbox.removeClass("campo-disabled");
    inputbox.removeClass("campo-errado");
    inputbox.removeClass("campo-correto");
    inputbox.attr("disabled", false);
    inputbox.val("");
    $("#contador-palavras").text(0);
    $("#contador-caracteres").text(0);
    $("#contador-tempo").text(tempo);
    cronometro();
};

function iniciaMarcador() {
    inputbox.on("input", function () {
        var frase = $(".frase").text();
        var digitado = inputbox.val();
        var comparavel = frase.substr(0, digitado.length);

        if (digitado === comparavel) {
            inputbox.removeClass("campo-errado");
            inputbox.addClass("campo-correto");
        } else {
            inputbox.addClass("campo-errado");
        }
    });
}

function inserePlacar() {
    var corpotab = $(".placar").find("tbody");
    var numPalavras = $("#contador-palavras").text();
    var usuario = "Ralf";

    var linha = novaLinha(usuario,numPalavras);
    linha.find(".botao-remover").click(removePlacar);
    corpotab.prepend(linha);
}

function novaLinha(usuario,palavras) {

    var tr = $("<tr>");
    var colunaUser = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(palavras);
    var colunaDelete = $("<td>");

    var linkDelete = $("<a>").addClass("botao-remover").attr("href", "#");
    var iconeDelete = $("<i>").addClass("small").addClass("material-icons").text("delete");

    linkDelete.append(iconeDelete);
    colunaDelete.append(linkDelete);

    tr.append(colunaUser);
    tr.append(colunaPalavras);
    tr.append(colunaDelete);

    return tr;
}

function removePlacar() {
        event.preventDefault();
        $(this).parent().parent().remove();
}
1 resposta

Já tentou fazer isto?

function removePlacar(event) {
        event.preventDefault();
        $(this).parent().parent().remove();
}