我正处于学习 js 和 jquery 的早期阶段。我陷入了一个我不明白的问题。 我有一个 HTML 表单,用于收集用户输入。单击提交按钮时,用户输入将作为新行保存到表中(我们将其称为“myTable”)。我已经完成了那部分。但现在我想在单击 myTable 中的一行时获取行数据。我也有点这样。单击该行时,我确实获得了数据,但当我单击该行时,我多次在警报中获得相同的数据。我第一次单击该行时会收到一个警报,第二次单击该行时会收到两个警报......依此类推。请指出我的错误。这是我的html:
<div>label>First Name: </label>
<input id="firstname" type="text" name="first name"/>
<br>
<label>Last Name: </label>
<input id="lastname" type="text" name="last name"/>
<input type ="button" value = "Submit" onclick ="addRow()" >
</div>
<table id="myTable" border=1 onclick="load_row()">
<tr >
<td>
First Name
</td>
<td>
Last Name
</td>
</tr>
</table>
这是我的 JavaScript: 此函数将用户输入作为新行添加到表中:
var addRow = function(){
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );
};
此函数会通过我单击的行的详细信息发出警报。这就是我猜我做错了什么的地方:
var load_row = function(){
var rows = $("#myTable tr");
rows.click(function() {
var data = new Array();
var cells = $(this).find("td");
cells.each(function(i, cell) {
data.push($(cell).text());
});
alert(data);
});
};
最佳答案
发生这种情况是因为每次调用 load_raw
时都会将 +1 点击事件绑定(bind)到每一行。
因此,最好使用 jquery on
绑定(bind)并从 load_row 函数中删除 click
绑定(bind)。
$('#myTable').on('click', 'tr', load_row())
关于javascript - 尝试获取行数据警报。为什么我在点击时收到多个警报?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12334802/