Die zeitweilige Delegation von JavaScript-Ereignissen funktioniert nach DOM-Mutationen nicht mehr ⇐ JavaScript

[Anonymous]

Ich stehe vor einem schwierigen und inkonsistenten JavaScript-Problem im Zusammenhang mit der Ereignisdelegierung, das nur nach bestimmten DOM-Mutationen auftritt, und ich versuche, die Grundursache zu verstehen, anstatt eine Problemumgehung anzuwenden.
Ziel
Ich möchte, dass ein delegierter Klickhandler weiterhin zuverlässig für dynamisch hinzugefügte Elemente funktioniert.
Erwartet Verhalten
Klickereignisse sollten für alle dynamisch erstellten Schaltflächen mithilfe der Ereignisdelegierung konsistent erfasst werden.
Tatsächliches Verhalten
Nach mehreren DOM-Aktualisierungen stoppt der Klick-Handler stillschweigend das Auslösen für neu hinzugefügte Elemente. In der Konsole werden keine JavaScript-Fehler angezeigt und vorhandene Elemente funktionieren möglicherweise weiterhin.
Umgebung

• Vanilla JavaScript (kein Framework)
• Ereignisdelegation über document.addEventListener
• Dynamische DOM-Updates
• Moderne Browser (Chrome / Firefox)

Minimal reproduzierbares Beispiel

Code: Select all

const container = document.getElementById("container");

document.addEventListener("click", function (e) {
if (e.target.matches(".dynamic-btn")) {
console.log("Clicked:", e.target.dataset.id);
}
});

function addButton(id) {
const btn = document.createElement("button");
btn.className = "dynamic-btn";
btn.dataset.id = id;
btn.textContent = "Button " + id;
container.appendChild(btn);
}

let count = 0;

setInterval(() => {
addButton(++count);

// Simulate DOM mutation
if (count % 5 === 0) {
container.innerHTML = container.innerHTML;
}
}, 1000);

Beobachtungen

• />
• Delegation sollte immer noch gemäß der Dokumentation funktionieren

Was ich versucht habe

• Nestes() anstelle von Matches() verwenden
• Ereignisse direkt an Elemente binden
• Doppelte Listener vermeiden
• Debuggen mit Haltepunkten und Speicher-Snapshots

Frage
Welches interne DOM- oder Browserverhalten führt dazu, dass delegierte Ereignishandler nach bestimmten DOM-Mutationen nicht mehr reagieren, z. B. einer Neuzuweisung? innerHTML, auch wenn keine Fehler ausgegeben werden?
Hängt das zusammen mit:

• Knotenidentitätsersatz?
• Ereigniszielungültigmachung?
• Garbage Collection von DOM-Referenzen?
• Oder ein anderes zugrundeliegendes Element Mechanismus?

Ich suche nach einer technischen Erklärung, warum das passiert, und dem richtigen Muster, um es zu vermeiden, nicht nur nach einer Problemumgehung.