javascript - 每次生成动态行，同时关注最后一行元素

Question

我有一张 table 。当我关注最后一行元素时，我想复制表格的最后一行并将其附加到最后一个位置。我可以按照我的代码做到这一点。

现在，这个新行成为我的最后一行。此后，我无法在单击其元素时生成行。事实上，它会在单击上一行(之前的最后一行)时生成行。

我怎样才能实现它？

$('.ankita').focus(function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您只需要创建一个委托(delegate)事件监听器，它只会对最后一行的焦点事件使用react。

$('#tbl').on('focus', 'tr:last .ankita', function(){  

  var $tr    = $(this).closest('.trbar');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);

$(this).removeClass("ankita");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table id='tbl'>
    <tbody>
        <tr>
            <td>
                <p>Cell1</p>
            </td>
            <td>
                <p>Cell2</p>
            </td>
        </tr>
        <tr class="trbar">
            <td>
                <p>Cell3</p>
            </td>
            <td>
                <input id="" class="ankita" type="text" />
            </td>
        </tr>
    </tbody>
</table>