Zugriff auf Element, das zuvor an das DOM angehängt wurde?

Ich habe die folgende HTML-Struktur in zwei Modals auf meiner Website - eines zum Hinzufügen neuer Datensätze und eines zum Bearbeiten vorhandener Datensätze:

HTML (hinzufügen) wird dem DOM über die TWIG-Syntax hinzugefügt

<div class="mb-3" id="bar_area-add">
 <div class="card">
 <div class="card-body">
 <h3 class="float-start">Thekendienst</h3>
 <div class="float-end">
 <button class="btn btn-sm btn-primary" type="button" id="bar_plus-add">
  <i class="bi-plus-lg"></i>
 </button>
 <button class="btn btn-sm btn-danger" type="button" id="bar_minus-add">
  <i class="bi-dash-lg"></i>
 </button>
 </div>
 <table class="table table-striped">
 <thead>
  <tr>
  <th>Zeitfenster</th>
  <th>MAs</th>
  </tr>
 </thead>
 <tbody id="bar_multiple-add">
  <tr id="bar_placeholder-add" style="display: none;">
  <td colspan="2">aktuell keine Position(en) verfügbar</td>
  </tr>
  <tr id="bar_shift_1-add">
  <td><input type="text" name="bar_timewindow_1" value="21:00-24:00" required=""></td>
  <td><input type="number" min="0" name="bar_amountma_1" value="2" required=""></td>
  <input type="hidden" name="bar_id_1" value="3" required="">
  </tr>
 </tbody>
 </table>
 </div>
 </div>
</div>

HTML (Bearbeiten) wird per JQuery.append()Funktion an das DOM angehängt

<div class="mb-3" id="bar_area-edit" style="">
 <div class="card">
 <div class="card-body">
 <h3 class="float-start">Thekendienst</h3>
 <div class="float-end">
 <button class="btn btn-sm btn-primary" type="button" id="bar_plus-edit">
 <i class="bi-plus-lg"></i>
 </button>
 <button class="btn btn-sm btn-danger" type="button" id="bar_minus-edit">
 <i class="bi-dash-lg"></i>
 </button>
 </div>
 <table class="table table-striped">
 <thead>
 <tr>
  <th>Zeitfenster</th>
  <th>MAs</th>
 </tr>
 </thead>
 <tbody id="bar_multiple-edit">
 <tr id="bar_placeholder-edit" style="display: none;">
  <td colspan="2">aktuell keine Position(en) verfügbar</td>
 </tr>
 <tr id="bar_shift_1-edit">
  <td><input type="text" name="bar_timewindow_1" value="21:00-24:00" required=""></td>
  <td><input type="number" min="0" name="bar_amountma_1" value="2" required=""></td>
  <input type="hidden" name="bar_id_1" value="3" required="">
 </tr>
 </tbody>
 </table>
 </div>
 </div>
</div>

Wie Sie sehen können, habe ich in beiden Strukturen auch 2 Schaltflächen, um Zeilen hinzuzufügen oder zu entfernen - es ist eine Art dynamisches Formularfeld. Dazu habe ich folgende JQuery-Funktion geschrieben:

var tasks = ['add', 'edit'];
var services = {{ services | json_encode | raw }};
 
tasks.forEach(task => {
 services.forEach(service => {
 $("#" + service.shortname + "_plus-" + task).click(function () {
 $("#" + service.shortname + "_multiple-" + task).each(function () {
 var i = $(this).find("tr").length;
 var n = (i - 1);
 $(this).append('<tr id="' + service.shortname + '_shift_' + (n + 1) + '-' + task + '">\n' +
  '<td><input type="text" name="' + service.shortname + '_timewindow_' + (n + 1) + '" value="00:00-00:00" required></td>\n' +
  '<td><input type="number" min="0" name="' + service.shortname + '_amountma_' + (n + 1) + '" value="0" required></td>\n' +
  '</tr><input type="hidden" name="' + service.shortname + '_id_' + (n + 1) + '" value="' + service.id + '" required>');
 if (n === 0) {
  $("#" + service.shortname + "_placeholder-" + task).hide();
 }
 });
 });
 $("#" + service.shortname + "_minus-" + task).click(function () {
 $("#" + service.shortname + "_multiple-" + task).each(function () {
 var i = $(this).find("tr").length;
 var n = i;
 if (n!== 0) {
  $("#" + service.shortname + '_shift_' + (n - 1) + '-' + task).remove();
  if (n === 2) {
  $("#" + service.shortname + "_placeholder-" + task).show();
  }
 }
 });
 });
 });
});

Leider funktioniert dies nur für die Hinzufügen-Aufgabe, wenn Sie im Bearbeitungsmodus auf die Schaltfläche Hinzufügen/Entfernen klicken, passiert nichts. Es kommt keine Fehlermeldung. Ich denke, dies könnte ein Ergebnis des Hinzufügens einer Bearbeitungsstruktur mit Jquery.append()zum DOM sein.

$.ajax({
 url: '/getJobs/' + eventClickEvent.event.id,
 type: 'get',
 success: function (jobData) {
 var jobs = JSON.parse(jobData);
 var services = {{ services | json_encode | raw }};
 services.forEach(service => {
 $('#areas-edit').append(`<div class="mb-3" id="` + service.shortname + `_area-edit" style="display: none;">
  <div class="card">
  <div class="card-body">
  <h3 class="float-start">` + service.name + `</h3>
  <div class="float-end">
  <button class="btn btn-sm btn-primary" type="button"
   id="` + service.shortname + `_plus-edit">
   <i class="bi-plus-lg"></i>
  </button>
  <button class="btn btn-sm btn-danger" type="button"
   id="` + service.shortname + `_minus-edit">
   <i class="bi-dash-lg"></i>
  </button>
  </div>
  <table class="table table-striped">
  <thead>
   <tr>
   <th>Zeitfenster</th>
   <th>MAs</th>
   </tr>
  </thead>
  <tbody id="` + service.shortname + `_multiple-edit">
   <tr id="` + service.shortname + `_placeholder-edit">
   <td colspan="2">aktuell keine Position(en) verfügbar</td>
   </tr>
  </tbody>
  </table>
  </div>
  </div>
  </div>`);
 var i = 1;
 jobs.forEach(job => {
 if (service.id === job.serviceId) {
  $('#' + service.shortname + '-editPill').addClass('bg-primary');
  $('#' + service.shortname + '-editPill').removeClass('bg-secondary');
  $('#' + service.shortname + '_area-edit').show();
  $('#' + service.shortname + '_placeholder-edit').hide();
  $('#' + service.shortname + '_multiple-edit').append(`
   <tr id="` + service.shortname + `_shift_` + i + `-edit">
   <td><input type="text"
   name="` + service.shortname + `_timewindow_` + i + `"
   value="` + job.timewindow + `" required></td>
   <td><input type="number" min="0"
   name="` + service.shortname + `_amountma_` + i + `"
   value="` + job.mas + `" required></td>
   <input type="hidden" name="` + service.shortname + `_id_` + i + `"
   value="` + service.id + `" required>
   </tr>
  `);
  i++;
 }
 });
 });
}
});

Lösung des Problems

Sie haben jQuery, verwenden Sie es. Delegieren oder so ähnlich

$(".service").on("click", function() {
 $(".task", this).each(function() {
 if (this.id.includes("plus")) {
 var len = $(this).find("tr").length;
...
 }
 if (n === 0) {
 $(this).find("[id*='_placeholder-']).hide();
 }
 })
 }
 else if (this.id.includes("_multiple") {
...
 }
 });
});