I am having a problem that is driving me crazy. I have looked for solutions on the net but everything I have found has not worked for me and I do not know what else to try.
I have a page in PHP that obtains data from a DB and with it dynamically creates a table. At the end of each row there is a button or link to delete the corresponding record.
This is the part of the PHP:
<div class="row mt-3">
<div class="col-12 col-xl-12">
<div class="card border-card-tab" id="reload-table">
<div class="card-header pb-0">
<h5 class="card-title">Restaurants List</h5>
</div>
<div class="card-body pt-0">
<table class="table table-striped table-hover" id="restaurants-table">
<thead>
<tr>
<th>Name</th>
<th>Id</th>
<th>Address</th>
<th>City Id</th>
<th class="text-end">Phone</th>
<th class="text-end">Email</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<?php
// Code which obtain the table data from MySql database
//SELECT bla, bla,2 bla3 FROM blatable... etc.
?>
<tr class="table-row-link">
<td class="Update"><i class="fas fa-circle text-success fa-fw"></i>Eat at Jhon's</td>
<td class="Update">123456789A</td>
<td class="Update">First Avenue</td>
<td class="Update">Heaven</td>
<td class="Update text-end">01233445567</td>
<td class="Update text-end">info@restaurantfake.com</td>
<td class="table-action text-end">
<a class="Delete" href="../Model/_restaurantsDBHelper.php?button-action=button-logicaldelete-restaurant&tab=1&inputIdRestaurant=1" data-id="1" rel="#reload-table" >Delete</a>
</td>
</tr>
<tr>
...
...
... etc.
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
</div>
The elimination is carried out by calling a PHP page through ajax that, once the deletion has been carried out, returns a string "ok" or "ko" indicating the result and in the success of the ajax a popup with a message is displayed while it is reloaded the board without the deleted row.
This is the JS code:
$(function () {
$("a[class='Delete']").click(function (e) {
var id = $(e.currentTarget).data('id');
var urlDel = $(e.currentTarget).attr('href');
var reload = $(e.currentTarget).attr('rel');
$.ajax({
type:'post',
url: urlDel,
data:'&dataid='+id,
success:function(msg){
$(reload).load(location.href + " " + reload);
if ((typeof msg != "undefined") && (msg != null) && (msg == 'ok')){
showMessage("Deleted", "Data with id: "+id+"</strong> has been deleted.");
} else {
showMessage("Error", "Data with id: <strong>"+id+"</strong> has not deleted.");
}
}
});
return false;
});
});
The problem is this: when I access the page for the first time (it doesn't matter which browser I use), everything works fine, but when I click on the delete button after the reload, the "click" event is no longer recognized and in instead the PHP page returns and shows the result (the text "ok" or "ko"). The ajax no longer works.
I have read that this could be due to the fact that when reloading the table the code no longer "listens" to the "click" event and for this it is necessary to modify the function in a similar way to this:
$(function () {
$("reload-table]").on("click", "a[class='Delete']", function (e) { ...etc. same code above});
$(function () {
$("body").on("click", "a[class='Delete']", function (e) { ...etc. same code above});
$(function () {
$(document).on("click", "a[class='Delete']", function (e) { ...etc. same code above});
Basically I have tried all the solutions indicated in the solution of the question: JQuery rebinding on vs bind after AJAX query but nothing seems to work. Can anybody see what I'm doing wrong?
