javascript-事件侦听器内部的事件侦听器不工作？

我是JavaScript新手，我有一个概念上的问题。本质上，我有一个div。一旦单击该div就会打开另一个div，现在我将调用这个div2。我想添加另一个div，让我们将其称为div2中的div3，并将事件侦听器附加到该div 3中的按钮。下面我快速编写了一段代码，用注释向您展示我的情况。

//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)

}

我已尝试添加window.load,document.addEventListener('DOMContentLoaded', function(){});在div3事件侦听器周围，我放置了我的脚本。身体末端的js都是在线建议的，但没有起作用。这篇文章是万不得已的。

我还将发布该问题的链接。（推荐使用Chrome）在该链接上，按下中间的任何矩形，您将看到右侧弹出的div 2，下面有4个按钮（div 3）。我不能让那些按钮做任何功能。

https://footballify.net/test/

此外，这些元素由循环创建，因此可能会导致问题。我也没有收到任何错误消息。也许我的事件监听器放错位置了？