preventDefault is not working on post request - php

Question

I have some problem when I trying to delete data using form with post method, I did this because many people said using $_GET method is not safe enough. So I try using this method,
I load the data from load.php
<?php
session_start();
require_once('../../classes/Config.php');
require_once('../../classes/Database.php');
require_once('../../classes/Query.php');
require_once '../../classes/ErrorHandler.php';
require_once '../../classes/Validator.php';
require_once '../../classes/Token.php';
$connection = new Database($host, $username, $password, $database);
$main = new Query($connection);
$table = 'karyawan';
$selectData = $main->select($table);
while($fetchData = $selectData->fetch_object()){
$delete = '<form action="" method="post"><input type="hidden" name="id_karyawan" value="'.$fetchData->id_karyawan.'"><input type="hidden" name="token" value="'.$_SESSION['token'].'"><a><button type="submit" class="btn btn-danger btn-xs" id="delete" onclick="deleteData()">delete</button></a></form>';
$button = '<td class="text-center">'.$delete.'</td>';
echo '<tr>
<td class="text-center">'.$fetchData->id_karyawan.'</td>
<td class="text-center">'.$fetchData->nama_karyawan.'</td>
<td class="text-center">'.$fetchData->alamat_karyawan.'</td>
<td class="text-center">'.$fetchData->telepon_karyawan.'</td>
<td class="text-center">'.$fetchData->akses.'</td>
'.$button.'
</tr>';
}
in $delete I set a form with POST method, so I have some forms to delete these datas, here is where my load.php should be loaded,
<div class="table-responsive">
<table class="table table-hover table-bordered table-condensed bg-success">
<thead>
<th class="text-center">ID Karyawan</th>
<th class="text-center">Nama Karyawan</th>
<th class="text-center">Alamat Karyawan</th>
<th class="text-center">Telepon Karyawan</th>
<th class="text-center">Hak Akses</th>
<th class="text-center">Opsi</th>
</thead>
<tbody id="load-data">
</tbody>
<tr>
<td colspan="5"></td>
<td class="text-center"><button class="btn btn-info btn-xs" id="showTambah">Tambah</button></td>
</tr>
</table>
<script type="text/javascript" src="karyawan.js"></script>
and here is my jQuery scripts
load();
deleteData();
function load() {
$('#load-data').load('process/karyawan/load.php');
}
function deleteData(){
$('#delete').click(function(e){
e.preventDefault();
alert('testing');
});
}
when I click delete button function deleteData() didn't work well both of preventDefault() or alert() message.
Can someone give me some advices??

Answer 1

Remove deleteData() from submit button and add class called btn-delete on the button and remove $('#delete').click(function(e){}); event and use $('.btn-delete').on("click",function(e){}); this event. As your content loadind dynamically click event will not work you have to use below code.
$('.btn-delete').on("click",function(e){
e.preventDefault();
alert("test")
});