Event listener inside of event listener not working?-CodePudding

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?

CodePudding user response：

You did not append div2 to div1. However, now this creates div2 and div3 every time you click div1. Is this what you want to achieve?

//Create Div1
let div1 = document.createElement("div")
div1.className = 'div1'
div1.innerHTML = "Div1: Click me"

//Attach EventListener on Div1 to create Div2 on click
div1.addEventListener("click", function() {
  //Create Div2
  let div2 = document.createElement("div")
  div2.className = 'div2'
  div2.innerHTML = "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 = 'Div 3 Button'
  div3.appendChild(button1)


  //Place Div3 in Div2
  div2.appendChild(div3); 
  
  //Place Div2 in Div1
  div1.appendChild(div2); 

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

<div ></div>

CodePudding user response：

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