Question

当我按下姓氏输入字段上的tab时，我正在尝试克隆表格的最后一行并将其附加到表格中，并带有空白值。所以我写了下面的代码。它工作得很好，直到你到达第二行，它似乎没有克隆并附加行，如果它是一个克隆。有没有办法绕过这个/我做错了什么？

    $(document).ready(function() {
        var $last_name = $('.last_name');
        var $blank_row = $('tr:last');
        var $time_table = $('#time_table');
        
        $last_name.keydown(function(e) {
            if (e.which === 9) {
            $blank_row.clone().find('input').val('').end().appendTo($time_table);
            }
        });                
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="time_table">
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Rate</th>
        <th class="time">ST</th>
        <th class="time">TH</th>
        <th class="time">DT</th>
        <th class="time">EX-ST</th>
        <th class="time">EX-TH</th>
        <th class="time">EX-DT</th>
    </tr>
    <tr class="blank_row">
        <td><input type="text" name="last_name" class="last_name"></td>
        <td><input type="text" name="first_name"></td>
        <td><input type="text" name="rate"></td>
        <td><input type="number" name="st" class="time_input"></td>
        <td><input type="number" name="th" class="time_input"></td>
        <td><input type="number" name="dt" class="time_input"></td>
        <td><input type="number" name="ex_st" class="time_input"></td>
        <td><input type="number" name="ex_th" class="time_input"></td>
        <td><input type="number" name="ex_dt" class="time_input"></td>
    </tr>
</table>

Answer 1

试试这个：

您正在使用的env.js绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。它不会绑定到动态创建的元素。为此，需要使用keydown()创建“委托”绑定。

on()

    $(document).ready(function () {
    var $last_name = 'input.last_name';
    var $blank_row = $('tr:last');
    var $time_table = $('#time_table');

    $("#time_table").on("keydown", $last_name, function (e) {
        if (e.which === 9) {
            $blank_row.clone().find('input').val('').end().appendTo($time_table);
        }
    });
});

Answer 2

因为动态添加了.last_name - 变量$last_name存储了对第一个空行的引用。

https://api.jquery.com/on/

    $(document).ready(function() {
        var $time_table = $('#time_table');
        
        $time_table.on('keydown', '.last_name', function(e) {
            if (e.which === 9) {
            $('tr:last').clone().find('input').val('').end().appendTo($time_table);
            }
        });                
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="time_table">
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Rate</th>
        <th class="time">ST</th>
        <th class="time">TH</th>
        <th class="time">DT</th>
        <th class="time">EX-ST</th>
        <th class="time">EX-TH</th>
        <th class="time">EX-DT</th>
    </tr>
    <tr class="blank_row">
        <td><input type="text" name="last_name" class="last_name"></td>
        <td><input type="text" name="first_name"></td>
        <td><input type="text" name="rate"></td>
        <td><input type="number" name="st" class="time_input"></td>
        <td><input type="number" name="th" class="time_input"></td>
        <td><input type="number" name="dt" class="time_input"></td>
        <td><input type="number" name="ex_st" class="time_input"></td>
        <td><input type="number" name="ex_th" class="time_input"></td>
        <td><input type="number" name="ex_dt" class="time_input"></td>
    </tr>
</table>

如何使用“which”克隆带有keydown输入的表行？

2 个答案: