Executar função JavaScript no evento click de um botão dentro de uma tabela

Question

Bom dia, tenho uma tabela e em cada linha dessa tabela tenho um botão, quando eu clicar nesse botão preciso que seja executada uma função mas não estou conseguindo fazer isso por que acho que não estou sabendo usar os seletores corretos.

Tabela:

    <table id="tbl" class="table table-striped">
        <tr id="cabecalho">
            <th>
                ID
            </th>
            <th>
                Insumo
            </th>
            <th>
                TD
            </th>
            <th>
                Unidade
            </th>
            <th>
                Quantidade
            </th>
            <th>
                Adicionar
            </th>
        </tr>
    </table>

Esse Script gera o corpo da tabela:

    $('#pesquisar').click(function () {
        $('.corpoTbl').remove();
        $.ajax({
            url: "/RCM/ListarMateriais",
            type: "POST",
            data: { nome: $('#NomeMaterial').val() },
            datatype: 'json',
            success: function (data) {
                $.each(data, function (I, item) {
                    $('#tbl').append("<tr class=\"corpoTbl\"> <td class=\"id\">" + item.ID + "</td><td>" + item.Nome + "</td><td>" + item.TD + "</td><td>" + item.Unidade +
                        "</td><td> <input class=\"qtda\" type=\"text\" value=\"0\" style=\"width: 50px;\" /> </td><td> <input class=\"btn\" type=\"button\" value=\"Adicionar\" /> </td></tr>")
                })
            }
        });
    });

Esse é o Script que quero que seja executado no click do botão dentro da tabela.

    $('#tbl .btn').click(function () {
        var Qtd = $('.qtda');
        var Id = $('.id');    
        if (Qtd.value != "0" && Qtd.value != "") {
            $.ajax({
                url: "/RCM/AddMaterial",
                type: "POST",
                data: { "Qtd": $('.qtda').Value, "Id": Id.textContent }
            })
            alert("Materiais Adicionados!");
        }
        else {
            alert("Informe a quantidade do material!")
        }
        
    })

Answer 1

crie uma função em js

function AddMaterial (qtde, identificador) {
        var Qtd = $('.qtda');
        var Id = $('.id');    
        if (Qtd.value != "0" && Qtd.value != "") {
            $.ajax({
                url: "/RCM/AddMaterial",
                type: "POST",
                data: { "Qtd":qtde, "Id": identificador}
            })
            alert("Materiais Adicionados!");
        }
        else {
            alert("Informe a quantidade do material!")
        }

onde você esta criando os botões use

<input type="Button" onclick='AddMaterial(' + item.Unidade +','+ item.Id')' Value='Adicionar' />

é só uma idéia veja se resolve seu problema :D

---

Caso a resposta seja útil ou responda sua questão, colabore marcando-a como resposta ou como útil.

Answer 2

Robson obrigado pela ajuda,

o problema era que o script esperava o click antes dos botoes existirem, o script abaixo resolve o problema.

    $('#tbl').on('click', '.btn', function (event) {
        var $botao = $(event.target);
        var $tr = $botao.closest('tr');
        var $qtda = $tr.find('.qtda');
        var $id = $tr.find('.id');    
        if ($qtda.val() !== "0" && $qtda.val() !== "") {
            $.ajax({
                url: "/RCM/AddMaterial",
                type: "POST",
                data: { "Qtd": $qtda.val(), "Id": $id.text() }
            })
            alert("Materiais Adicionados!");
        }
        else {
            alert("Informe a quantidade do material!")
        }

    })