在我使用 = innerHTML 更新 html 后，getElementByID.onchange 不起作用

Question

我的起始 html 如下所示：

<label> Names: </label><br>
<input type="text" class="form-control name" placeholder="name1" id="name1" name ="name1"><br>

我有一个捕获 html 的变量：

var html =   "<label> Names: </label><br><input type=\"text\" class=\"form-control name\" placeholder=\"name1\" id=\"name1\" name =\"name1\"><br>"

然后我有一个 onchange 运算符，当第一行中有文本时，它会执行几个函数。 .onchange 第一次被很好地拾取并运行后续功能。我最后多了一行：

for (n = 1; n < inputLength+1 ; ++n) {
    var test2 = document.getElementById(dude+n);
    test2.onchange = forFunction
    }

  function forFunction() {
    for (m = 1; m < inputLength+1 ; ++m) {
      var test = document.getElementById(dude+m)
      if (test.value != "") {
        var txt = "<input type=\"text\" class=\"form-control name\" placeholder="+dude+(m+1)+" id="+dude+(m+1)+" name="+dude+(m+1)+"><br>";
        document.getElementById('group_names').innerHTML = updateHTML(txt);
        //function updateHTML(txt)
      }
    }
  }

  var html =   "<label> Names: </label><br><input type=\"text\" class=\"form-control name\" placeholder=\"name1\" id=\"name1\" name =\"name1\"><br>"
  function updateHTML(txt) {
    html = html + txt;
    return html;
  }

问题是，在完成所有这些之后，我最终得到了两个所需的输入行：name1 和 name2。但是，当我第二次在这些字段中输入文本时，不会拾取 .onchange。但是当我检查和查看 html 时，这些元素在 html 中。

还有，当我

console.log(inputFormDiv.getElementsByTagName('input').length);

在我第一次运行函数后（在我第一次更改输入字段中的值时），输入的长度从 1 增加到 2，以便正确识别，而不是 .onchange。

想法？

Answer 1

onchange 仅在添加到 html 上的属性并且用户点击文本框时才会起作用，例如：

<input onchange="forFunction()" type="text" class="form-control name" placeholder="name1" id="name1" name ="name1">

在 JavaScript 代码中添加 onchange 事件。将更改事件添加到 addEventListener 例如：

var test2 = document.getElementById(dude+n);
test2.addEventListener('change', forFunction, false)

但是，如果您希望在用户键入键时触发事件，请使用 keypress 事件。例如：

 var test2 = document.getElementById(dude+n);
 test2.addEventListener('keypress', forFunction, false

一个基本的例子：https://jsfiddle.net/xrL6y012/1/

Answer 2

而不是.innerHTML = html + text 做.insertAdjacentHTML('beforeend', text)，这样您就可以保留原始html（和事件绑定）。

编辑：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML