Handle button click event inside table that loaded using ajax

Question

how to handle click event inside table that loaded using ajax ? this is my table.

<table class="table table-striped table-bordered table-hover" id="test">
</table>

this is my function to load data into my table above

function tampilkan() {
var data_table = ""; 
var head_table = ""; 
    $.ajax({
        url: "tampilkanker/"+ $('#noworkorder').val(),
        dataType: "json",
        success: function(data) {
        $('#test').empty();
        head_table +="<thead><tr class='bg-info'><th width='10%'>No</th><th width='80%'>Kerusakan</th><th width='10%'>Action</th></tr></thead>";
         for (var i =0; i<data.length; i++){
              $no = i + 1;
             data_table +="<tr id='"+data[i].id+"'><td> "+ $no +"</td> <td> "+data[i].value+"</td><td>"+"<button id='haptranker' class='a btn btn-warning'>Hapus</button>"+"</td></tr>";
         }
          $('#test').append(head_table);    
          $('#test').append(data_table);    
        }
    });
 }

load the function when first load.

window.onload = function() {
    tampilkan();
}

im trying this code but not working on my table. the simple code to check that the button is clicked.

$(document).ready(function() {
    $('#test tr').click(function() {
    alert("xxx");
    });
});

how can i run another function like click() when i click that button ? my main objective is too running delete function trough ajax table, if i can solve this problem maybe is not too difficult to do that.