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

Question

我的EventListener未定位首页加载后添加的元素。我原本以为它可能是我所拥有的顺序，但我改变了代码所在的位置并尝试将其嵌套在创建新div的区域内，但它要么整体上断颜色，要么原始问题继续。< / p>

我最后的想法是，我可能需要添加EventListener来更新elems变量。我没有成功找到引导我的东西。

如果您点击它们加载的原始4个方格，但在使用“添加方块！”之后按钮添加的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>

Answer 2

我会用事件委托来解决这个问题，而不是将事件绑定到每个单独的元素。这意味着您将侦听器绑定到父元素或任何其他祖先元素，然后执行您想要的event.target。

//Turn div red if clicked
var elems = document.getElementsByClassName("square");
var parent = document.getElementById("parent");
parent.addEventListener('click', (event) => {
  let target = event.target;
  if (target.style.backgroundColor !== "red") {
    target.style.backgroundColor = "red";
  } else {
    target.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>