DJE-011 Error Template

innerHTML destroying event listeners

Error message

Event listeners stop working after LiveView re-render

Before the DOM morphing implementation, applyDjUpdateElements() used innerHTML to apply full HTML updates. This destroyed all event listeners that were bound to elements inside the updated region (e.g., DOMContentLoaded drag/drop handlers). Fixed in v0.3.0 with morphdom-style DOM diffing (morphChildren/morphElement).

bug-fixed dom events liveview

Affected versions: <0.3.0

Before (problematic)

// Old behavior in vdom-patch.js
function applyDjUpdateElements(target, newHtml) {
    target.innerHTML = newHtml;  // Destroys all event listeners!
}

After (fixed)

// New behavior with DOM morphing
function applyDjUpdateElements(target, newHtml) {
    const template = document.createElement("template");
    template.innerHTML = newHtml;
    morphChildren(target, template.content);
    // Event listeners on existing elements are preserved
}

Before (problematic)

<div id="drag-zone">
    <!-- Event listeners destroyed on every re-render -->
</div>

After (fixed)

<div id="drag-zone" dj-update="ignore">
    <!-- djust will skip this element during DOM patching -->
</div>

innerHTML destroying event listeners

Solutions