Fix: Event-Delegation für dynamisch erstellte Buttons (Bearbeiten/Löschen in Tee-Karten). Entfernt onclick-Attribute und ersetzt sie durch data-Attribute + Event-Delegation auf dem Container.

Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
This commit is contained in:
Vibe Nuage Agent
2026-06-05 18:50:09 +00:00
parent 0baceb14c6
commit f111153bde

25
app.js
View File

@ -652,6 +652,23 @@ class TeeTracker {
document.getElementById('add-tea-btn').addEventListener('click', () => this.openTeaModal());
}
// Event delegation for tea action buttons (edit/delete)
const teasListContainer = document.getElementById('teas-list');
if (teasListContainer) {
teasListContainer.addEventListener('click', (e) => {
const editBtn = e.target.closest('.tea-edit-btn');
const deleteBtn = e.target.closest('.tea-delete-btn');
if (editBtn) {
const teaId = editBtn.dataset.teaId;
if (teaId) this.editTea(teaId);
} else if (deleteBtn) {
const teaId = deleteBtn.dataset.teaId;
if (teaId) this.showDeleteTeaConfirm(teaId);
}
});
}
// Tea modal
if (document.getElementById('close-modal')) {
document.getElementById('close-modal').addEventListener('click', () => this.closeTeaModal());
@ -1308,8 +1325,8 @@ class TeeTracker {
${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
<div class="tea-actions">
<button class="tea-action-btn tea-edit-btn" onclick="window.app.editTea('${tea.id}')">Bearbeiten</button>
<button class="tea-action-btn tea-delete-btn" onclick="window.app.showDeleteTeaConfirm('${tea.id}')">Löschen</button>
<button class="tea-action-btn tea-edit-btn" data-tea-id="${tea.id}" data-action="edit">Bearbeiten</button>
<button class="tea-action-btn tea-delete-btn" data-tea-id="${tea.id}" data-action="delete">Löschen</button>
</div>
</div>
`).join('');
@ -1356,8 +1373,8 @@ class TeeTracker {
${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
${tea.description ? `<div class="tea-description">${tea.description}</div>` : ''}
<div class="tea-actions">
<button class="tea-action-btn tea-edit-btn" onclick="window.app.editTea('${tea.id}')">Bearbeiten</button>
<button class="tea-action-btn tea-delete-btn" onclick="window.app.showDeleteTeaConfirm('${tea.id}')">Löschen</button>
<button class="tea-action-btn tea-edit-btn" data-tea-id="${tea.id}" data-action="edit">Bearbeiten</button>
<button class="tea-action-btn tea-delete-btn" data-tea-id="${tea.id}" data-action="delete">Löschen</button>
</div>
</div>
`).join('');