Event listener inside of event listener not working?

Issue

I am new to JavaScript and I have a conceptual issue. Essentially I have a div. Once clicked on the div opens another div, I will call this div2 for now. I want to add another div, lets call it div3 inside div2 and attach an event listener to buttons in that div 3. Below I have quickly written a code to show you my situation with comments.

//Create Div1
let div1 = document.createElement("div")
div1.className = 'div1'

//Attach EventListener on Div1 to create Div2 on click
div1.addEventListener("click", function() {

  //Create Div2
  let div2 = document.createElement("div")
  div2.className = 'div2'

  //Create Div3
  let div3 = document.createElement('div')
  div3.className = 'div3';

  //Create button and attack it to div3
  let button1 = document.createElement('div')
  button1.classList = 'button1'
  button1.innerHTML = 'click me'
  div3.appendChild(button1)


  //Place Div3 in Div2
  div2.appendChild(div3)


  //Attach Event Listener on Div3 so it logs something on click
  document.querySelector('.div3').addEventListener('click', function() {
    console.log('test')
  });
});
//Push Div1 to a container in the DOM
document.querySelector('.parentContainer').appendChild(div1)

}

I have tried adding window.load, document.addEventListener('DOMContentLoaded', function(){}); around the div3 event listener and I have placed my script.js at the end of the body which have all been suggested online but have not worked. This post is a last resort.

I will also post a link to the issue. (Chrome Recommended) On this link, press any of the rectangles in the middle and you will see div 2 pop up on the right with 4 buttons (div 3) under it. I cannot get those buttons to do any function.

https://footballify.net/test/

Also these elements are created by a loop so that may be causing the issue. I get no error messages either. perhaps I have my event listener in the wrong spot?

Solution

This error occurs because the elements are being generated dynamically. Have you tried looking into event delegation?

Answered By – gloo

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.