事件偵聽器內部的事件偵聽器不起作用？

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)

}

我嘗試添加window.load ， document.addEventListener('DOMContentLoaded', function(){}); 圍繞 div3 事件偵聽器，我將我的 script.js 放在正文的末尾，這些都是在線建議的，但沒有奏效。 這篇文章是最后的手段。

我還將發布指向該問題的鏈接。 （推薦使用 Chrome） 在這個鏈接上，按下中間的任意一個矩形，你會看到 div 2 在右邊彈出，下面有 4 個按鈕（div 3）。 我無法讓這些按鈕執行任何操作 function。

https://footballify.net/test/

此外，這些元素是由循環創建的，因此可能會導致問題。 我也沒有收到任何錯誤消息。 也許我的事件監聽器在錯誤的位置？

Answer 1

你沒有 append 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

發生此錯誤是因為元素是動態生成的。 您是否嘗試過調查事件委托？