Can’t run jquery function on button from table result of jquery data refresh table

Question

My function does not run when pressing the button generated from the refresh table function, please help what makes it not work and I check the console, there is no jquery function visible

here is refresh table function RefreshTable()

function refreshTable()
          {
            $.ajax({
                  url: "{{ url('/tabeltrxbarang') }}",
                  dataType: 'json',
                  success: function (data) {
                      var html = '<table class="table table-responsive" width="100%">' +
                                  '<tbody>' +
                                    '<tr class="bg-yellow">' +
                                        '<th class="small-col" width="5%"">No</th>' +
                                        '<th class="name text-center"><b>Nama</b></th>' +
                                        '<th class="small-col"></th>' +
                                        '<th class="small-col" alig="center"></th>' +
                                        '<th class="small-col"></th>' +
                                        '<th class="name">Total</th>' +
                                        '<th class="small-col"></th>' +
                                    '</tr>';
                      for(var i = 0; i < data.length; i++){
                          var total = addCommas(data[i].total);
                          html += '<tr class="bg-gray color-palette">' +
                                      '<td class="small-col">'+ (i + 1) +'</td>' +
                                      '<td class="name" align="left"><b>' + data[i].nama_barang + '</b></td>' +
                                      '<td class="small-col text-center">' +
                                          '<button id="' + data[i].kode_barang + '" class="btn btn-warning btn-xs tambah">' +
                                              '<i class="fa fa-fw fa-plus"></i>'+
                                          '</button>' +
                                      '</td>'+
                                      '<td class="small-col" alig="center">'+ data[i].qty +'</td>' +
                                      '<td class="small-col text-center">' +
                                          '<button id="' + data[i].kode_barang + '" class="btn btn-warning btn-xs kurang">' +
                                              '<i class="fa fa-fw fa-minus"></i>' +
                                          '</button>' +
                                      '</td>'+
                                      '<td class="name" align="right">' +  total + '</td>' +
                                      '<td class="small-col">' +
                                          '<button id="' + data[i].kode_barang + '" class="btn btn-danger btn-xs batal">' +
                                          '<i class="fa fa-fw fa-trash-o"></i>' +
                                          '</button>' +
                                      '</td>' +
                                  '</tr>';
                          }
                          html += '</tbody>' +
                                  '</table>';
                          $('#tabeltrxbarang').html(html);
                  },
                  error: function (data) {
                    console.log(data);
                  },
              });
          }

I want click this button with value id

<button id="' + data[i].kode_barang + '" class="btn btn-warning btn-xs tambah">

here button click event for run myfunction

$('button.btn.btn-warning.btn-xs.tambah').click(function(){
              var id = $(this).attr('id');
              TambahQtyBarang(id);
           });

and here the function must run

function TambahQtyBarang(kodebarang){
            $.ajax(
                {
                    type    : "POST",
                    url     : "{{ url('/trx_tambah_qty') }}",
                    data    : {kode_barang:kodebarang},
                    dataType: "text",
                    success : function(response)
                    {
                        refreshTable();
                    },
                    error: function (response) {
                      console.log('error barang');
                    },
                });
          }

here the controller from the URL

public function TambahQty0(Request $request)
    {
      $kode_barang = $request->kode_barang;
      $kode_outlet = Session::get('kode_outlet');
      $no_trx      = Session::get('no_trx');

      $data_trx_barang = TrxBarangmodel::where('kode_barang', $kode_barang)
                                       ->where('no_trx', $no_trx)
                                       ->where('kode_outlet', $kode_outlet)
                                       ->where('status', '2')->first();

      $qty = (int)$data_trx_barang->qty + 1;
      $total = (double)$qty * (double)$data_trx_barang->harga_jual;

      $data_trx_barang_qty = TrxBarangmodel::where('kode_barang', $kode_barang)
                                           ->where('no_trx', $no_trx)
                                           ->where('kode_outlet', $kode_outlet)
                                           ->where('status', '2')
                                           ->update(array('qty'   => (int)$qty , 'total' => (double)$total));
    }

my jquery function is not displayed in Console and can't update the database with that jquery function. What wrong with my script.

Thanks in advance

Answer 1

Instead of this

$('button.btn.btn-warning.btn-xs.tambah').click(function(){
    var id = $(this).attr('id');
    TambahQtyBarang(id);
});

try to replace this code and check.

$("body").on('click', 'button.btn.btn-warning.btn-xs.tambah', function() {
    var id = $(this).attr('id');
    TambahQtyBarang(id);
});