I am running the following code in a Flask template page and while the first part of the script runs, the second does not. The workflow goes click on link in table with id=original, and item row moves to table with id=selected_classes. However, when I click the in the selected_classes row, it does not move to the original one.
For clarity, jQuery starting with $('#original tr.hover2 a') works, and the portions tarting with $('#selected_classes tr.hover2 a') does not trigger when clicking the link in the selected_classes table.
<script>
$(function() {
$('#original tr.hover2 a').on('click', function(e) {
var row = $(this).parents('tr').eq(0);
$('#selected_classes').append(row);
var classCell = row.find(".class_cell");
var idCell = row.find(".id_cell");
console.log("add");
$.ajax({
type : 'POST',
url : "/addclass",
data : {'addID': idCell.text()}
});
e.preventDefault();
});
$('#selected_classes tr.hover2 a').on('click', function(e) {
var row = $(this).parents('tr').eq(0);
$('#original').append(row);
var classCell = row.find(".class_cell");
var idCell = row.find(".id_cell");
console.log("remove");
$.ajax({
type : 'POST',
url : "/delclass",
data : {'addID': idCell.text()}
});
e.preventDefault();
});
});
</script>
....
<div class="row mt-2 mr-1 ml-1">
<div class="col border mr-1 bg-light">
<p class="font-weight-bold">Available Classes</p>
<table class="table" id="original">
<tbody>
<tr class="hover2">
<td class="time_cell">09:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">659</td>
</tr>
<tr class="hover2">
<td class="time_cell">10:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">660</td>
</tr>
<tr class="hover2">
<td class="time_cell">11:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">661</td>
</tr>
<tr class="hover2">
<td class="time_cell">12:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">662</td>
</tr>
<tr class="hover2">
<td class="time_cell">13:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">663</td>
</tr>
<tr class="hover2">
<td class="time_cell">14:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">664</td>
</tr>
<tr class="hover2">
<td class="time_cell">15:00:00</td>
<td class="date_cell">2020-11-16</td>
<td class="class_cell"><a href="#">Up Close with Nature</a></td>
<td class="id_cell">665</td>
</tr>
</tbody>
</table>
</div>
<div class="col-5 border bg-light ml-1">
<p class="font-weight-bold">Selected Classes</p>
<table class="table" id="selected_classes">
<!-- ajax will fill in table -->
</table>
</div>
</div>
