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

Cant make two buttons use the same function in jquery with html

本文关键字：html 函数 jquery 按钮 两个 不能      更新时间：2023-09-26

我有一些代码可以在单击按钮时向div添加一些内容，并在该代码中添加一个名为"teamReq_"+index+"_AddYear"的按钮（索引是从隐藏的输入字段中获取的数字）。

因此，发送垃圾邮件按钮将创建div：teamReq_1_AddYear，teamReq_2_AddYear，teamReq_3_AddYear等

在函数结束时，我运行以下代码：

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

addYear是稍后在 js 文件中定义的函数，但它只针对最新创建的按钮运行，例如，如果我创建了 3 个按钮，它只会运行 teamReq_3_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;

}

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;

}

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

每次单击"添加团队"按钮时，您都会复制并粘贴当前 html，添加新 html（新行），但只为新行添加 onclick 事件。

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

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

我已经对实现的这段代码进行了摆弄 http://jsfiddle.net/od828m98/

相关文章：