事件侦听器内部的事件侦听器不起作用？

Question

我是 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)

}

我尝试在 div3 事件侦听器周围添加 window.load、document.addEventListener('DOMContentLoaded', function(){});，并且我将 script.js 放在正文的末尾在线建议，但没有奏效。这post是最后的手段。

我也会post一个link的问题。（Chrome推荐）在这个link上，按中间的任意一个矩形，你会看到div2在右边弹出4个按钮（div3）在它下面。我无法让这些按钮执行任何功能。

https://footballify.net/test/

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

Answer 1

您没有将 div2 附加到 div1。但是，现在每次单击 div1 时都会创建 div2 和 div3。这是你想要达到的目标吗？

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

Answer 2

发生此错误是因为元素正在 . Have you tried looking into event delegation?

事件侦听器内部的事件侦听器不起作用？

Event listener inside of event listener not working?

html

javascript

css

jquery