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

Vasant Hun · Accepted Answer · 2019-04-17 14:28:11Z

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

edited Apr 17, 2019 at 14:28

answered Apr 17, 2019 at 14:13

Vasant Hun

814 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

halococ Over a year ago

i get some error. here is Uncaught Error: Syntax error, unrecognized expression: .button.btn.btn-warning.btn-xs.tambah)

halococ Over a year ago

thanks. now the function can run. I use this script

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

Vasant Hun Over a year ago

Can you give this answer as useful :)

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related