Fatal编程技术网
  • javascript/
  • Javascript 使用=innerHTML更新html后getElementByID.onchange不工作

Javascript 使用=innerHTML更新html后getElementByID.onchange不工作

javascript

Javascript 使用=innerHTML更新html后getElementByID.onchange不工作,javascript,onchange,innerhtml,getelementbyid,Javascript,Onchange,Innerhtml,Getelementbyid,我的起始html如下所示： <label> Names: </label><br> <input type="text" class="form-control name" placeholder="name1" id="name1" name ="name1"><br> 名称： 我有一个捕获html的变量： var html =

我的起始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>"

var html=“名称：

”
然后我有一个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;
  }

for（n=1；n”；
document.getElementById（'group_names'）。innerHTML=updateHTML（txt）；
//函数updateHTML（txt）
}
}
}
var html=“名称：

”
函数updateHTML（txt）{
html=html+txt；
返回html；
}
问题是，在完成所有这些之后，我最终得到了所需的两个输入行：name1和name2。但是，当我第二次在这些字段中输入文本时，.onchange不会被拾取。但是当我检查和查看html时，元素就在html中

还有，当我

log（inputFormDiv.getElementsByTagName（'input'）.length）

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

想法？

只有当添加到html的属性中并且用户从文本框中单击时，onchange才会起作用，例如：

<input onchange="forFunction()" type="text" class="form-control name" placeholder="name1" id="name1" name ="name1">
但是，如果您希望在用户键入按键时触发事件，请使用按键事件。e、 g:

 var test2 = document.getElementById(dude+n);
 test2.addEventListener('keypress', forFunction, false
一个基本示例：

只有在添加到html上的属性并且用户从文本框中单击时，onchange才会起作用，例如：

<input onchange="forFunction()" type="text" class="form-control name" placeholder="name1" id="name1" name ="name1">
但是，如果您希望在用户键入按键时触发事件，请使用按键事件。e、 g:

 var test2 = document.getElementById(dude+n);
 test2.addEventListener('keypress', forFunction, false
一个基本示例：

而不是
.innerHTML=html+text
执行
.insertAdjacentHTML（'beforeend'，text）
，这样可以保持原始html（和事件绑定）

编辑：

而不是
。innerHTML=html+text
执行
。insertAdjacentHTML（'beforeend'，text）
，这样可以保留原始html（和事件绑定）

编辑：

谢谢你，Greg，但不幸的是，eventListener在使用innerHTML创建输入字段后也不会拾取对这些字段的更改。除非我做错了什么。以下是我对（n=1；n