Невозможно запустить функцию jquery для кнопки из таблицы результатов обновления таблицы данных jquery

Question

Моя функция не запускается при нажатии кнопки, сгенерированной из функции обновления таблицы, пожалуйста, помогите, что не работает, и я проверяю консоль, нет видимой функции jquery

здесь есть функция обновления таблицы 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);
                  },
              });
          }

Я хочу нажать эту кнопку со значением id

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

здесь событие нажатия кнопки для запуска myfunction

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

, и здесь функция должна запускаться

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');
                    },
                });
          }

здесь контроллер с 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));
    }

моя функция jquery не отображается в консоли и не может обновить базу данных с помощью этой функции jquery.Что не так с моим сценарием.

Заранее спасибо

Answer 1

Вместо этого

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

попробуйте заменить этот код и проверьте.

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