javascript - 尝试获取行数据警报。为什么我在点击时收到多个警报？

Question

我正处于学习 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);
});

};

Answer 1

发生这种情况是因为每次调用 load_raw 时都会将 +1 点击事件绑定(bind)到每一行。因此，最好使用 jquery on 绑定(bind)并从 load_row 函数中删除 click 绑定(bind)。

$('#myTable').on('click', 'tr', load_row())