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>

app.js

@@ -226,8 +226,11 @@ class TeeTracker {
         
         // Initialize
         this.initStorage();
+        this.setupEventListeners();
         this.loadData().then(() => {
-            this.init();
+            this.renderAll();
+            this.initCharts();
+            this.updateSettingsStats();
         });
     }
     
@@ -631,7 +634,8 @@ class TeeTracker {
     // ============================================
     
     init() {
-        this.setupEventListeners();
+        // Initialization is now handled in constructor
+        // This method is kept for backward compatibility
         this.renderAll();
         this.initCharts();
         this.updateSettingsStats();
@@ -648,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());
@@ -1304,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-edit-btn" data-tea-id="${tea.id}" data-action="edit">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-delete-btn" data-tea-id="${tea.id}" data-action="delete">Löschen</button>
                 </div>
             </div>
         `).join('');
@@ -1352,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-edit-btn" data-tea-id="${tea.id}" data-action="edit">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-delete-btn" data-tea-id="${tea.id}" data-action="delete">Löschen</button>
                 </div>
             </div>
         `).join('');

index.html

@@ -386,8 +386,8 @@
                     <textarea id="import-data-textarea" class="modal-textarea" placeholder="{\n  \"teas\": [...],\n  \"entries\": [...]\n}"></textarea>
                 </div>
                 <div class="modal-footer">
-                    <button id="import-data-btn" class="btn btn-primary" onclick="window.app.handleImportData()">📥 Importieren</button>
+                    <button id="import-data-btn" class="btn btn-primary">📥 Importieren</button>
-                    <button id="cancel-import-btn" class="btn btn-secondary" onclick="window.app.closeImportModal()">Abbrechen</button>
+                    <button id="cancel-import-btn" class="btn btn-secondary">Abbrechen</button>
                 </div>
             </div>
         </div>