My links that i got from the server using php ajax isn't working on my webpage

Question

I have this code where i get multiple data from database using ajax jquery and php. which works and displays the data in the webpage but the problem is that the links in the data (like <a> tag link) isn't responding or showing any sign of a click event even after i add a click event. this is my code before

HTML

<tbody class="pro-bd"></tbody>

JQUERY AJAX

getProducts();
function getProducts() {
    $.ajax({
        url: "adminbked/getData.php",
        method: "POST",
        data: {
            action: "getProducts"
        },
        success: function (data) {
            $(".pro-bd").html(data);
            // This is the dataTable plugin
            $("#proTable").dataTable();
        }
    })
}

getData.php

<?php

require "../../db/dbconn.php";
$POST = filter_var_array($_POST, FILTER_SANITIZE_STRING);

if(isset($POST['action']) && $POST['action'] == "getProducts") {
    $status = "Yes";
   $sql = $conn->prepare("SELECT * FROM shopping_products_info ORDER BY productId DESC ");
   $sql->execute();
   $result = $sql->get_result();
   $html = '';
   while($row = $result->fetch_assoc()):
   
    $html .= '<tr>
        <td>
            <a href="javascript:void(0)" title="Send Product" id="'.$row['productId'].'" data-toggle="modal" data-target="#exampleModalLong" class="bt-snd text-success"><i class="fa fa-paper-plane fa-fw fa-lg"></i></a>
            <a href="javascript:void(0)" title="View Details" id="'.$row['productId'].'" class="text-info btn-dt"><i class="fa fa-info-circle fa-fw fa-lg"></i></a>
            <a href="javascript:void(0)" title="Edit Details" id="'.$row['productId'].'" class="text-primary btn-edt"><i class="fa fa-edit fa-fw fa-lg"></i></a>
            <a href="javascript:void(0)" title="Delete product" id="'.$row['productId'].'" class="bt-dlt text-danger"><i class="fa fa-trash fa-fw fa-lg"></i></a>
        </td>
    </tr>';
 endwhile; 
echo $html;

}

This is the click event

$(".bt-dlt").click(function () {
   var id = $(this).attr("id");
   console.log(id)
})

Please is there anything i did that makes the link not clickable. what should i do.