Javascript Dynamic Element Event Listener

Javascript Code to Target Element (ie event handler) that Does not Yet Exist in the Dom (ie added dynamically later via Javascript or php) without Raising Error

To target an element that does not exist YET in the DOM can be accomplished without a Javascript error by creating the event handler for a parent element of the element that will be added later.

/* --------------------------------------------------------------- to create event listener for element that does not yet exist in the dom (ie gets inserted at some point later via php or js) simply add an event listener to a parent element ---------------------------------------------------------------- */ document.querySelector("#parentElementId").addEventListener("click", function(event) { // Check if the clicked element has the desired id if (event.target && event.target.id === "elementid") { // Your onclick logic here console.log("Element with id 'elementid' clicked!"); } });