如何单击按钮单击时动态创建的元素？答案

【问题标题】：how can i click on element which is being created dynamically on button click?如何单击按钮单击时动态创建的元素？
【发布时间】：2018-05-22 18:47:26
【问题描述】：

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

这是我的代码：

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>

【问题讨论】：

我不确定这是否可行，因为只有当我单击按钮将值从输入添加到 div 时才会创建复选框
这在 jQuery 中很容易处理，但我确实找到了同样的这个 vanilla js 版本：gist.github.com/Daniel-Hug/abbded91dd55466e590b
谢谢，但我想用纯 js 来做

标签： javascript

【解决方案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>

【讨论】：

【解决方案2】：

很遗憾，我不在我的电脑附近，无法为您输入代码示例。我假设您希望新添加的复选框在单击时调用一个函数？为此，您需要在创建新复选框后将事件侦听器添加到新复选框。您可以在创建新复选框 (getValue) 的函数中执行此操作。

如果我说的不清楚，我稍后会写一个代码示例。

【讨论】：