Получить элемент по ID из таблицы ответов AJAX

Question

Привет всем

У меня проблема с выбором / получением идентификатора элемента из ajax response

Вот мой код

script. js:

<script>
$(document).ready(function() {
    createPagination(0);
    function createPagination(pageNum){
        $.ajax({
            url: 'http://localhost/bulus-ci/budget/pagination/'+pageNum,
            type: 'get',
            dataType: 'json',
            success: function(response){
                console.log(response.budget);
                $('#pagination_link').html(response.pagination_link);
                paginationData(response.budget);
            }
        });
    }
    function paginationData(data) {
        $('#budget_table tbody').empty();
        for(budget in data){
            var budgetRow = "<tr>";
            budgetRow += '<td class="bg-info text-light">'+ data[budget].budget_id +'</td>';
            budgetRow += "<td>"+ data[budget].carline +"</td>";
            budgetRow += "<td>"+ data[budget].delivery_plan +"</td>"
            budgetRow += "<td>"+ data[budget].subgroup +"</td>"
            budgetRow += "<td>"+ data[budget].item_desc +"</td>"
            budgetRow += "<td>"+ data[budget].curr +"</td>";
            budgetRow += "<td>"+ data[budget].price_ori +"</td>";
            budgetRow += "<td>"+ data[budget].qty_ori +"</td>";
            budgetRow += "<td>"+ data[budget].amount_ori_usd +"</td>";
            budgetRow += '<td> <a href="javascript:void(0);" data-id="'+data[budget].id +'" data-toggle="modal" data-target="#detailExpenseModal" class="badge badge-primary detailExpenseModal">detail</a> <a href="javascript:void(0);" data-id="'+data[budget].id +'" data-toggle="modal" data-target="#editExpenseModal" class="badge badge-success editExpenseModal">edit</a> <a href="http://localhost/bulus-ci/budget/commit_expense/'+data[budget].id +'" class="badge badge-secondary tombol-commit">commit</a> <a href="javascript:void(0);" data-id="'+data[budget].id +'" data-budgetid="'+data[budget].id +'" data-toggle="modal" data-target="#deleteExpenseModal" class="badge badge-danger tombol-hapus">delete</a>';
            $('#budget_table tbody').append(budgetRow);                 
        }
    }   
});
</script>

view. php:

<div class="card-body">
      <div class="table-responsive">
        <table class="table table-bordered" id="budget_table" width="100%" cellspacing="0">
          <thead class="thead-dark">
            <tr>
                <th>Budget ID</th>
                <th>Carline</th>
                <th>Delivery Plan</th>
                <th>Subgroup</th>
                <th>Item Desc</th>
                <th>Curr</th>
                <th>Price</th>
                <th>Qty</th>
                <th>Amount(USD)</th>
                <th>Action</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <div align="right" id="pagination_link"></div>
    </div>
  </div> 

Вот представление. php выглядит после получения ответа от ajax:

и теперь я пытаюсь выбрать класс-> tombol-commit , используя селектор jQuery, используя следующие коды:

$('a.badge.badge-secondary.tombol-commit').on('click', function (e){
    e.preventDefault();
    alert('aaaaaa');
})

это не так Я пытался использовать:

1. find ()
2. filter ()
3. прямой выбор -> $ ('a.badge.badge-Secondary. tombol-commit ')

Но предупреждение все равно не придет, может кто-нибудь помочь мне с этими

примечаниями: так выглядит исходный код страницы после получения ответа ajax