Event listener inside of event listener not working?

Question

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?

well the eventlisterner will only trigger while the script runs. So you have to click inside div 1 to start the script and have then to click div 3 before the script finished... So overall a poor solution to an easy problem. — tacoshy, May 25 '22 at 00:27
Do you want to carry on creating div3s every time div2 is clicked? It seems unlikely but I'm not absolutely clear what is to happen once div1 and then div2 have been clicked once. — A Haworth, May 25 '22 at 00:41
You just had to append div2 to div1: https://codepen.io/sparxia/pen/XWZeLex — m4n0, May 25 '22 at 00:45
@tacoshy Can you explain what are you trying to say for the "poor" solution? :) I am a noob trying to learn JS. — m4n0, May 25 '22 at 00:48

score 1 · Answer 1 · answered May 25 '22 at 00:37

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 class="parentContainer"></div>

Oh I must have forgotten that in the code I quickly made, but yes that is what I want. The thing is I want to create button elements in div 3 and attach eventlisteners to them, that's where my issue comes from — Siuuuuuu, May 25 '22 at 01:04

score 1 · Accepted Answer · answered May 25 '22 at 00:40

1

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

answered May 25 '22 at 00:40

gloo

681
2
12

Thank you so much, the documentation you posted was very helpful to me and by using event delegation I was able to make it work. – Siuuuuuu May 25 '22 at 01:12

Event listener inside of event listener not working?

2 Answers2