Usuário com melhor resposta
Executar função JavaScript no evento click de um botão dentro de uma tabela

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