javascript - 我如何点击按钮点击时动态创建的元素？

Question

我想制作简单的待办事项列表应用程序，我创建了从输入框获取值的函数，并在该函数内部创建了靠近文本的复选框，现在我想制作一个函数，该函数将在单击复选框时执行。由于加载文档时复选框不在页面上，我收到错误消息，如何才能使其正常工作？

这是我的代码:

var btn = window.document.getElementById("btn");
var result = window.document.getElementById("result");

function getValue() {
  var input = window.document.getElementById("input").value;
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.className = 'checkbox';
  result.appendChild(checkbox);
  result.innerHTML += input + "<br>";

}

var checkbox = document.getElementById('checkbox');

btn.addEventListener('click', getValue);
checkbox.addEventListener('click', function(){
  alert("Clicked");
});

<input type="text" id="input">
<input type="button" value="Submit" id="btn">

<div id="result">

</div>

Answer 1

它是这样制作的。

您需要在创建复选框后移动 addEventListener。

此外，您还需要使用 createTextNode，因为使用 innerHTML 会分离您的 addEventListeners ( 1 )。出于同样的原因，您需要将 appendChild 移动到函数的底部。

var btn = window.document.getElementById("btn");
var result = window.document.getElementById("result");

function getValue() {
  var input = window.document.getElementById("input").value;
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.addEventListener('click', function(){
    alert("Clicked");
  });
  text = document.createTextNode(input);
  result.appendChild(checkbox);
  result.appendChild(text);
}

var checkbox = document.getElementById('checkbox');

btn.addEventListener('click', getValue);

<input type="text" id="input">
<input type="button" value="Submit" id="btn">

<div id="result">

</div>