Javascript 不能让两个按钮在带有html的jquery中使用相同的函数

我有一些代码，可以在单击按钮时向div添加一些内容，在这些代码中，它添加了一个名为

“teamReq”+index+“\u AddYear”

（index是从隐藏的输入字段中提取的数字）

因此，滥发该按钮将创建div:

teamReq\u 1\u AddYear

，

teamReq\u 2\u AddYear

，

teamReq\u 3\u AddYear

等

在函数末尾，我运行以下代码：

 document.getElementById("teamReq_"+index+"_AddYear").onclick = addYear;

addYear

是一个稍后在js文件中定义的函数，但是它只为最新创建的按钮运行。例如，如果我创建了3个按钮，它将只为

teamReq\u 3\u addYear

运行，其他两个按钮将导致重新加载网页。我该如何解决这个问题？ 生成div的完整代码：

    document.getElementById("addTeam").onclick = addTeam;  function addTeam() {
event.preventDefault();
var index = document.getElementById("varTeamsReq").value;
var existingHTML = document.getElementById("teamsReqTab").innerHTML;
existingHTML += "<div style=\"overflow:hidden; width:1000px\" id=\"teamReq_"+index+"\">";
existingHTML += "  <div style=\"float:left\">";
existingHTML += "    <input id=\"teamReq_"+index+"_Quantity\" type=\"number\" value=\"1\" min=\"1\" style=\"width:60px\">";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:left\" id=\"teamReq_"+index+"_MidText\">";
existingHTML += "    &nbsp;students from year&nbsp;"
existingHTML += "  </div>";
existingHTML += "  <input type=\"hidden\" name=\"varTeamsReq_"+index+"_Years\" value=\"2\" id=\"varTeamsReq_"+index+"_Years\"/>";
existingHTML += "  <div style=\"float:left; overflow:hidden;\" id=\"teamReq_"+index+"_Years\">";
existingHTML += "    <div style=\"float:left\" id=\"teamReq_"+index+"_Year_1_Div\">";
existingHTML += "      <input id=\"teamReq_"+index+"_Year_1\" type=\"number\" value=\"7\" min=\"7\" max=\"13\" style=\"width:60px\">";
existingHTML += "    </div>";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:left\" id=\"teamReq_"+index+"_AddYear_Div\">";
existingHTML += "    <button id=\"teamReq_"+index+"_AddYear\"><i class=\"fa fa-plus fa-1x\" style=\"transform: scale(1.3); color:#00FF00\"></i></button>";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:left\" id=\"teamReq_"+index+"_DelYear_Div\">";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:right\">";
existingHTML += "    <button id=\"teamReq_"+index+"_Remove\"><i class=\"fa fa-minus fa-1x\" style=\"transform: scale(1.3); color:#FF0000\"></i></button>";
existingHTML += "  </div>";
existingHTML += "</div>";
document.getElementById("teamsReqTab").innerHTML = existingHTML;
document.getElementById("varTeamsReq").value = parseInt(document.getElementById("varTeamsReq").value) + 1;
document.getElementById("teamReq_"+index+"_AddYear").onclick = addYear;
document.getElementById("teamReq_"+index+"_Remove").onclick = delTeam;

document.getElementById（“addTeam”）.onclick=addTeam；函数addTeam（）{
event.preventDefault（）；
var index=document.getElementById（“varTeamsReq”）.value；
var existingHTML=document.getElementById（“teamsReqTab”）.innerHTML；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“本年度学生”
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
现有HTML+=“”；
document.getElementById（“teamsReqTab”）.innerHTML=existingHTML；
document.getElementById（“varTeamsReq”）.value=parseInt（document.getElementById（“varTeamsReq”）.value）+1；
document.getElementById（“teamReq”+索引+“\u AddYear”）.onclick=AddYear；
document.getElementById（“teamReq”+index+“\u Remove”）.onclick=delTeam；

}

addYear函数的完整代码：

function addYear() {
event.preventDefault();
var index = this.id.substring(8,this.id.length-8);
var year = document.getElementById("varTeamsReq_"+index+"_Years").value;
if (year == 7) {
  document.getElementById("teamReq_"+index+"_AddYear_Div").innerHTML = "";
}
if (year == 2) {
  document.getElementById("teamReq_"+index+"_DelYear_Div").innerHTML = "<button id=\"teamReq_"+index+"_DelYear\"><i class=\"fa fa-minus fa-1x\" style=\"transform: scale(1.3); color:#FF0000\"></i></button>";
  document.getElementById("teamReq_"+index+"_DelYear").onclick = delYear;
}
for (i = 2; i < year; i++) {
  document.getElementById("teamReq_"+index+"_Year_"+i+"_Div").innerHTML = "&nbsp;,&nbsp;<input id=\"teamReq_"+index+"_Year_"+i+"\" type=\"number\" value=\"7\" min=\"7\" max=\"13\" style=\"width:60px\"/>";
}
var existingHTML = document.getElementById("teamReq_"+index+"_Years").innerHTML;
existingHTML += "    <div style=\"float:left\" id=\"teamReq_"+index+"_Year_"+year+"_Div\">";
existingHTML += "      &nbsp;or&nbsp;";
existingHTML += "      <input id=\"teamReq_"+index+"_Year_"+year+"\" type=\"number\" value=\"7\" min=\"7\" max=\"13\" style=\"width:60px\"/>";
existingHTML += "    </div>";
document.getElementById("teamReq_"+index+"_Years").innerHTML = existingHTML;
document.getElementById("varTeamsReq_"+index+"_Years").value = parseInt(document.getElementById("varTeamsReq_"+index+"_Years").value) + 1;

函数addYear（）{
event.preventDefault（）；
var索引=此.id.substring（8，此.id.length-8）；
var year=document.getElementById（“varTeamsReq”+索引+“\u Years”）.值；
如果（年份==7）{
document.getElementById（“teamReq”+索引+“\u AddYear\u Div”）.innerHTML=“”；
}
如果（年份==2）{
document.getElementById（“teamReq”+索引+“\u DelYear\u Div”）.innerHTML=“”；
document.getElementById（“teamReq”+索引+“\u DelYear”）.onclick=DelYear；
}
对于（i=2；i

---

}

代码的问题是获取现有html，添加新html并将结果添加回div。这样做会删除现有html的所有单击事件

每次单击“添加团队”按钮时，复制并粘贴当前html，添加新html（新行），但仅为新行添加onclick事件

相反，您可以像这样附加新的html：

var holder = document.getElementById('teamsReqTab');
holder.insertAdjacentHTML('afterend', newHTML)

---

我已经对实现的代码进行了修改

这与jQuery有什么关系？也许可以发布您的完整代码，这样我们就可以看到发生了什么。@11684我正在使用jQuery，所以如果解决方案需要jQuery，那就可以了。@AkshayArora更新为包含所有错误代码谢谢，它成功了！你知道为什么会这样吗？.onclick=function是否只是将html更改为包含onclick=“function（）”？很抱歉，我不是母语人士。我试着解释一下：每次添加新团队时，您都在替换#teamsReqTab中的html。执行此操作时，不再有任何附加到#teamsReqTab的单击事件。但是，您确实为新行创建了一个新的单击事件，这就是为什么最新的行始终有效，而其余的行则停止工作的原因。