javascript - 页面加载后添加的按钮在 EventListener 中无法识别

Question

我的 EventListener 没有针对在页面初始加载后添加的元素。我最初认为这可能是我的顺序，但我更改了代码所在的位置并尝试将其嵌套在创建新 div 的区域内，但它要么破坏了整个颜色变化，要么原始问题继续存在。

我最后的想法是，也许我需要添加一个 EventListener 来更新 elems 变量。我没能找到指导我的东西。

如果您单击它们加载的原始 4 个方 block ，但在使用“添加一个方 block !”之后按钮添加的 div 行为不一样。

//Turn div red if clicked
var elems = document.getElementsByClassName("square");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
  if (this.style.backgroundColor !== "red") {
    this.style.backgroundColor = "red";
  } else {
    this.style.backgroundColor = "#1E1E1E";
  }
}));

//Slider
var slider = document.getElementById("range");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
  var parent = document.getElementById("parent");
  output.innerHTML = this.value;
  parent.style.width = this.value + "%";
}

//Add Div
function addDiv(parent_div) {
  var div = document.createElement("div");
  var parent = document.getElementById(parent_div);
  if (parent) {
    parent.appendChild(div);
  }
}
var button = document.getElementById("addsquare");
if (button) {
  button.addEventListener("click", function() {
    // change dynamically your new div
    addDiv('parent', {
      'class': 'square'
    });
  });
}

#parent {
  margin: 0 auto;
  min-width: 200px;
  max-width: 94.2%;
  width: 25%;
  border: 1px dashed grey;
  overflow: hidden;
}

#parent>div {
  float: left;
  margin: 1px;
  width: calc(50px - 2px);
  height: calc(50px - 2px);
  background-color: #1E1E1E;
}

input,
button {
  margin: 0;
}

.controls {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
}

.controls>h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

#addsquare {
  padding: 8px;
  margin-bottom: 5px;
}

.slidewrap {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 25%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<div class="controls">
  <h2>Controls</h2>
  <button id="addsquare">Add a Square!</button>
  <div class="slidewrap">
    <input type="range" min="25" max="100" value="25" class="slider" id="range">
    <div>Game zone is set to: <span id="value"></span>%</div>
  </div>
</div>

<div id="parent">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

Answer 1

需要给动态创建的div添加事件监听器:

button.addEventListener("click", function() {
  // change dynamically your new div
  var newDiv = addDiv('parent', { 'class': 'square' });
  newDiv.addEventListener('click', squareClickHandler)
});

squareClickHandler 只是您用来更改正方形颜色的旧匿名函数。

//Turn div red if clicked
var elems = document.getElementsByClassName("square");
Array.from(elems).forEach(v =>
    v.addEventListener('click', squareClickHandler));

function squareClickHandler() {
  if (this.style.backgroundColor !== "red") {
    this.style.backgroundColor = "red";
  } else {
    this.style.backgroundColor = "#1E1E1E";
  }
}

//Slider
var slider = document.getElementById("range");
var output = document.getElementById("value");
output.innerHTML = slider.value;
slider.oninput = function() {
  var parent = document.getElementById("parent");
  output.innerHTML = this.value;
  parent.style.width = this.value + "%";
}

//Add Div
function addDiv(parent_div) {
  var div = document.createElement("div");
  var parent = document.getElementById(parent_div);
  if (parent) {
    parent.appendChild(div);
  }
  return div;
}
var button = document.getElementById("addsquare");
if (button) {
  button.addEventListener("click", function() {
    // change dynamically your new div
    var newDiv = addDiv('parent', {
      'class': 'square'
    });
    
    newDiv.addEventListener('click', squareClickHandler)
  });
}

#parent {
  margin: 0 auto;
  min-width: 200px;
  max-width: 94.2%;
  width: 25%;
  border: 1px dashed grey;
  overflow: hidden;
}

#parent>div {
  float: left;
  margin: 1px;
  width: calc(50px - 2px);
  height: calc(50px - 2px);
  background-color: #1E1E1E;
}

input,
button {
  margin: 0;
}

.controls {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 10px;
}

.controls>h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

#addsquare {
  padding: 8px;
  margin-bottom: 5px;
}

.slidewrap {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 25%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<div class="controls">
  <h2>Controls</h2>
  <button id="addsquare">Add a Square!</button>
  <div class="slidewrap">
    <input type="range" min="25" max="100" value="25" class="slider" id="range">
    <div>Game zone is set to: <span id="value"></span>%</div>
  </div>
</div>

<div id="parent">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>