Create event click to dynamic button

Question

I’m adding lines dynamically in a table, but I can’t make the dynamically created button work.

Below is the excerpt where I create an ajax request to add a row to my table:

    $("#btnitemproduto").click(function(){
        var xmlhttp = new XMLHttpRequest();
        var hash = document.getElementById("inputHash").value;
        var e = document.getElementById("produtos");
        var produto = e.options[e.selectedIndex].value;
        var produtodescr = e.options[e.selectedIndex].text;
        var qtd = $("#inputQuantidade").val();
        var embalagem = $("#inputEmbalagem").val();
        var precokg = $("#inputPrecoKg").val();
        var precooriginal = document.getElementById("inputPrecoOriginal").value;
        var precototal = $("#inputPrecoTotal").val();
        var precosaco = $("#inputPrecoSaco").val();

            $.post("itempedido.php",
            {
                hash: hash,
                produto: produto,
                quantidade: qtd,
                embalagem: embalagem,
                precokg: precokg,
                precooriginal: precooriginal,
                precototal: precototal,
                produtodescr: produtodescr,
                precosaco: precosaco
            },
            function(data, status){
                if(jQuery.trim(data)!=""){
                    $('#tblitens > tbody:last').append(data);
                    var x = $("#inputValorTotal").val();
                    var y = parseFloat(precototal.replace('.','').replace(',','.')) +  parseFloat(x);
                    $("#inputValorTotal").val(y);
                    x = "R$ " + y.toFixed(2).replace(".", ",").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.");
                    $("#sum").html("Valor Total: "+x);
                }else{
                    alert("Atenção! Você já adicionou este produto ao pedido!");
                }
            });
        }); 

Excerpt HTML that I add inside the table (return of itempedido.php):

<tr>
    <td class="col-sm-5"><b>'.$produtodescr.'</b></td>
    <td class="col-sm-1 text-center"><b>'.$quantidade.'</b></td>
    <td class="col-sm-1 text-right"><b>'.$embalagemp.'</b></td>
    <td class="col-sm-1 text-right"><b>'.$precokgp.'</b></td>
    <td class="col-sm-1 text-left"><b>'.$fontend.'</b></td>
    <td class="col-sm-1 text-right"><b>'.$precosaco.'</b></td>
    <td class="col-sm-1 text-right"><b>'.$precototalv.'</b></td>
    <td class="col-sm-1 text-center">
       <button id="btndeleteitem" name="btndeleteitem" type="button" class="btn btn-default btn-xs" data-id="'.$hash.'" data-idproduct="'.$produto.'" >        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Excluir</button></td>
</tr>

Warning that should be displayed by clicking the button:

    $("#tblitens").on("click", ".btndeleteitem", function(e) {
        alert("Teste!");
    });

Answer 1

I imagine the problem is using the . btndeleteitem class instead of the #btndeleteitem id. Fixing is:

$("#tblitens").on("click", "#btndeleteitem", function(e) {
        alert("Teste!");
});