I have an action column in the table with a delete button. The code is using jQuery to handle the delete button and make an AJAX request to a file called "ajaxfile.php" with the id of the record to be deleted. The success function of the AJAX request is then removing the row from the HTML table if the response is 1, and displaying an alert if the response is not 1 . It deletes on the first page but when I do a sort or change the page, the button stops deleting. Have read it is about the DOM and pagination but struggling to fix it. Here is the code
<table id="zero_config" class="table table-striped table-bordered">
<thead>
<tr>
<th>Username</th>
<th>Name</th>
<th>Shift</th>
<th>Date</th>
<th>Date Created</th>
<th>Update Data</th>
</tr>
</thead>
<tbody>
<td><input type='button' name='id' class='delete btn btn-danger' id='del_{$id}' data-id='{$id}' value='Delete'/>
</tbody>
<script>
$(document).ready(function () {
// Delete
$('.delete').on('click', function () {
var el = this;
// Delete id
var deleteid = $(this).data('id');
// Confirm box
bootbox.confirm("Do you really want to delete record?", function (result) {
if (result) {
// AJAX Request
$.ajax({
url: 'ajaxfile.php',
type: 'POST',
data: {id: deleteid},
success: function (response) {
// Removing row from HTML Table
if (response == 1) {
$(el).closest('tr').css('background', 'tomato');
$(el).closest('tr').fadeOut(800, function () {
$(this).remove();
});
} else {
bootbox.alert('Record not deleted.');
}
}
});
}
});
});
});
</script>
