3
respostas

Como posso colocar um evento "click" em um elemento que ainda não existe na página?

Assim que eu preencho um formulário, uma linha da tabela é criada! Na última coluna desta tabela, nascem dois botões um "editar" e um "excluir" (para cada nova linha adicionada)! Só que não consigo fazer o JS escutar o evento "click" no botão "excluir" criado pelo próprio JS. Como posso fazer isso?

3 respostas

Oi Hugo, boa noite

Cara, dá uma lida nesse carinha aqui oh: http://api.jquery.com/on/

É ele que vai resolver seu problema :)

Não consigo excluir a linha do botão (".btnDelete") que eu clico! Qual o erro do código?

$(document).ready();

var botaoAdcProduto = $(".botaoAdicionar");

botaoAdcProduto.click(function(event){
    event.preventDefault();
    montaLinhaProduto ();
});

function montaLinhaProduto(){
    var nomeProduto = $("#nome-do-produto").val();
    var classeProduto = $("#classe-do-produto").val();
    var precoProduto = $("#preco-do-produto").val();

    var tdNome = $("<td>").addClass("dadoProduto");
    var tdClasse = $("<td>").addClass("dadoProduto");
    var tdPreco = $("<td>").addClass("dadoProduto");
    var tdAcao = $("<td>").addClass("dadoProduto");

    var btnEdt = $("<button>").addClass("btn-sm").addClass("btn-primary").addClass("btnProduto").text("Editar");

    var btnDlt = $("<button>").addClass("btn-sm").addClass("btn-danger").addClass("btnProduto").addClass("btnDelete").text("Excluir");
    btnDlt.attr("data-toggle", "modal"). attr("data-target", "#deletar-produto");

    var linhaProduto = $("<tr>").addClass("linha-de-produto");
    linhaProduto.find(".btnDelete").click(removeProduto);

    linhaProduto.append(tdNome.text(nomeProduto));
    linhaProduto.append(tdClasse.text(classeProduto));
    linhaProduto.append(tdPreco.text(precoProduto));
    linhaProduto.append(tdAcao.append(btnEdt));
    linhaProduto.append(tdAcao.append(btnDlt));

    var listaProdutos = $(".corpoDaTabela").append(linhaProduto);
};

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

Hugo, você pode colocar seu código de exemplo nesse site aqui https://jsfiddle.net, por favor? Digo, com todo seu html, js e etc.