javascript javascript中动态创建的按钮中的Onclick事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13133731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onclick event in dynamically created button in javascript
提问by pughalveni
Requirements: I have one table with one row and three columns. first column is having button. when i click that button new row should be added to the table, and when i click the button in the newly added row(ie created dynamically) it should further add new row.
要求：我有一张一排三列的表格。第一列有按钮。当我单击该按钮时，应该将新行添加到表格中，当我单击新添加的行（即动态创建）中的按钮时，它应该进一步添加新行。
only the last row button should add new row,all previous buttons should change to delete buttons .
只有最后一行按钮应该添加新行，所有以前的按钮都应该更改为删除按钮。
--java script function.
--java 脚本函数。
<html>
<head runat="server"><TITLE>Add/Remove dynamic rows in HTML table</TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.setAttribute('type','button');
element1.setAttribute('name','Add Row1');
element1.setAttribute('value','Add Row');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "checkbox";
cell3.appendChild(element3);
element1.onclick=addRow(tableID);
}
</HEAD>
<BODY>
<TABLE id="dataTable" width="250px" border="1">
<TR>
<td><INPUT type="button" value="Add Row" name="Add Row" onclick="addRow('dataTable')"/></td>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="checkbox" name="chk"/></TD>
</TR>
</TABLE>
</BODY>
</html>
when i run this code i get one row with three columns. when i click the button in the first row.. its adding rows infinitely. please help me to get output .
当我运行此代码时，我得到一行三列。当我单击第一行中的按钮时..无限添加行。请帮我获取输出。
thanks in advance .
提前致谢 。
回答by Clark Pan
The reason this code doesn't work is this part:
此代码不起作用的原因是这部分：
element1.onclick=addRow(tableID);
What you're expecting to happen is to assign a value of 'addRow(tableID)' to the 'onclick' attribute of the newly created element.
您期望发生的是将 'addRow(tableID)' 的值分配给新创建元素的 'onclick' 属性。
What you're actually doing is invoking the 'addRow' function straight away, cause the program to loop indefinately.
您实际上正在做的是立即调用“addRow”函数，导致程序无限循环。
The shortest path to fix this would be to use something like this instead:
解决这个问题的最短路径是使用这样的东西：
element1.setAttribue('onclick','addRow("'+tableID+'")');
回答by Ilya Sidorovich
That's because your function is calling itself:
那是因为您的函数正在调用自身：
**function addRow(tableID) {**
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.setAttribute('type','button');
element1.setAttribute('name','Add Row1');
element1.setAttribute('value','Add Row');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "checkbox";
cell3.appendChild(element3);
**element1.onclick=addRow(tableID);**
}
