jquery - tr：当我在jquery中添加带有.after的行时，最后没有选择最后一行

Question

我有一些看起来像这样的表：

<table width="600" border="1" id="mytable">
    <tbody>
        <tr>
            <td width="300">col1</td>
            <td width="100">col2</td>
            <td width="100">col3</td>
            <td width="100">col4</td>
        </tr>
        <tr>
            <td width="300"><input type="text"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100">&nbsp;</td>
        </tr>
        <tr>
            <td width="300"><input type="text"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100">&nbsp;</td>
        </tr>
        <tr>
            <td width="300"><input type="text"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100"><input type="text" size="12"></td>
            <td width="100">&nbsp;</td>
        </tr>
    </tbody>
    </table>

然后我希望能够通过简单地检查最后一行是否有任何值来动态扩展该表。如果有，我想扩展它，如果没有，我就顺其自然。现在，我正在通过侦听按键事件来完成此操作：

    $("#mytable tr:last input").keypress(function () {
    autoAddRow();
    });

其中引用了这个：

var _addRow = '<tr><td width="300"><input type="text" id="name"></td><td width="100"><input type="text" size="12" id="units"></td><td width="100"><input type="text" size="12" id="value"></td><td width="100">&nbsp;</td></tr>';


function autoAddRow()
{
    if($('#mytable > tr:last > name').val() != "" || $('#mytable > tr:last > units').val() != ""|| $('#mytable > tr:last > value').val() != "")
    {
        $('#mytable tr:last').after(_addRow);
    }
}

这是有效的，除了当它添加一行时，它不会将其视为最后一行以用于 tr:last 选择。在这种情况下，第三行（硬编码的最后一行）始终是被检查的表中的最后一行。

我如何强制它在动态扩展时检查表的最后一行，或者以其他方式重现此功能。

Answer 1

由于元素是动态添加的，因此您希望在此处使用事件委托：

$(document).on('keypress', '#mytable tr:last input', function () {
   autoAddRow();
});

工作的jsFiddle。