Is there any way to bind a div which is created after DOM loaded and add event on it on vanila JS?

Question

currently I am making my own project and I got stuck in :/ I wanted to add an event and give some function on div which is made with a button("create"). However, the console returned "Uncaught TypeError: Cannot read property 'addEventListener' of null" this. I think it is because DIV(.c) is made after JS run. But I need to add an eventlistener and function on DIV(.c) to accomplish what I want. So, is there any way to bind a div which is created later and add an

const createButton = document.querySelector(".create");
const paperBook = document.querySelector(".b");

createButton.addEventListener("click", createWriting);

function createWriting(e) {
  e.preventDefault();
  const writing = document.createElement("div");
  writing.classList.add("c");
  writing.innerHTML = `All work No rest make jack a dull boy`;

  paperBook.appendChild(writing);
}

const myProblem = document.querySelector(".c");

myProblem.addEventListener("click", randomFunction);

function randomFunction(e) {
  e.preventDefault();
  console.log(e)
}

<div class="a">
      <button class="create">create</button>
      <div class="b"></div>
    </div>

event on it?

Below is my code. But I summarized it to simplify for you if you need a whole code just ask me, please :) thx!

Does this answer your question? [Attach event to dynamic elements in javascript](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) — Jon P, Jul 04 '21 at 22:58

AlexSp3 · Answer 1 · 2021-07-05T01:49:43.130

I think the problem is that this part of code

const myProblem = document.querySelector(".c");

It is executed before you create your .c element, so the new elements would not be included on it. Try to add the event everytime a new element is created in the createWriting function

const createButton = document.querySelector(".create");
const paperBook = document.querySelector(".b");

createButton.addEventListener("click", createWriting);

function createWriting(e) {
  e.preventDefault();
  const writing = document.createElement("div");
  writing.classList.add("c");
  writing.innerHTML = `All work No rest make jack a dull boy`;

  paperBook.appendChild(writing);

  writing.addEventListener("click", randomFunction);
}

function randomFunction(e) {
  e.preventDefault();
  console.log(e)
}

<div class="a">
   <button class="create">create</button>
   <div class="b"></div>
</div>

could do `writing.addEventListener` : `querySelector` is no longer needed. — Jasen, Jul 05 '21 at 01:00

Is there any way to bind a div which is created after DOM loaded and add event on it on vanila JS?

1 Answers1