Adding Event Handlers on Dynamically Created Elements with Vanilla Javascript

Updated on August 1, 2019Published on March 21, 2019

In jQuery adding event handlers to dynamic elements is quite simple. But when you try to do the same thing with pure Javascript, it is not very direct.

With pure Javascript attaching event handlers on elements that don't yet exist in the page will throw an error, and the event handler code won't work.

For example in the below snippet, an event handler is defined for an element. This element is appended to a container later on with Javascript.

<div id="button-container"></div>

// #submit-button is not yet present so this wil throw an error
document.querySelector("#submit-button").addEventListener('click', function() {
alert('CLICKED');
});
// #submit-button is dynamically added with Javascript
document.querySelector("#button-container").innerHTML = '<button id="submit-button">Submit</button>';
// click on #submit-button is not going to work
document.querySelector("#submit-button").click();

Creating the element first and then attaching the event handler will work, but usually this is not the pattern adopted while coding.

To keep the event handling code of the dynamic element separate as if it is present in the DOM, the event delegation model can be used.

Event Delegation — Attaching Event Handler on Parent of the Dynamically Created Element

The yet-to-be created dynamic element is not present in the DOM, so event handlers cannot be attached to it. But its parent is present in the DOM, so event handler can be attached to the parent element.

In case the parent is also going to be dynamically created, then the body element or the document element can be chosen as the parent.

So the event is attached to the parent container. The event object passed to the callback function contains a property target that holds the DOM element which caused the event to occur. This target can be compared whether it is the same dynamic element which is created. If yes, the event handler code can be executed.