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

  • Pergunta

  • 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!")
            }
            
        })

    quinta-feira, 28 de agosto de 2014 13:01

Respostas

  • 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!")
            }
    
        })

    • Marcado como Resposta Alan F. Almeida quinta-feira, 28 de agosto de 2014 16:59
    quinta-feira, 28 de agosto de 2014 16:59

Todas as Respostas

  • 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.

    • Sugerido como Resposta RobsonGmack quinta-feira, 28 de agosto de 2014 15:21
    quinta-feira, 28 de agosto de 2014 15:21
  • 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!")
            }
    
        })

    • Marcado como Resposta Alan F. Almeida quinta-feira, 28 de agosto de 2014 16:59
    quinta-feira, 28 de agosto de 2014 16:59