I am facing an issue with adding a table programmatically that has an onclick event triggering a specific JavaScript function using the row's id for editing purposes. Unfortunately, the function is not being called as expected. I have attempted to modify the button by adding a class and tweaking some code, but it appears to be unsuccessful. This functionality was previously working fine, and now I am struggling to identify the cause and solution.
function buildTable() {
$.ajax({
url: "getTable.php",
dataType: "json",
success: function(result) {
if (result != null) {
$('#measurements tbody tr').remove();
result.forEach(function (measurement) {
var message = "<tr><td>" + dateFromtimestamp(measurement.weigh_date) + "</td>";
...
// Code continues here, creating HTML elements dynamically
});
}
}
});
}
The table structure in question:
<div class="panel panel-info">
<div class="panel-heading text-center">Past measurements</div>
<div class="panel-body">
<table class="table table-striped" id="measurements">
<thead class="thead-dark">
...
// Table columns continue here
</table>
<div class="row"> </div>
</div>
</div>
The edit function causing trouble:
function editRow(id) {
$.ajax({
...
// Edit function details go here
});
}
I also tried changing the button markup by adding a class: and attempted to capture the click event using $('.editRow').on("click", function() {} method with no success.