无法从 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);
});