javascript - 为什么克隆只能克隆一次元素？

Question

我是 jquery 新手，我 100% 确定我犯了逻辑错误，但我看不到它。基本上，当用户在字段中键入一个项目时，我想克隆这些字段，以便他们可以继续添加更多信息。在我正在处理的示例中，我尝试创建 sibling 及其年龄的列表。

这是我的代码:

$(document).ready(function () {
    $("input[name='age']").on('keydown', function() {
    //is it the last input?
    if (this == $("input[name='age']:last", this.form)[0]) {
        //insert an empty clone of the current input
        //$(this).after($(this).clone(true).val(''));
        $('.family').clone().insertAfter(".family");
    }

这是 html:

<form>
<div class="family">
    <input name="age" value=0>  <input name="sibling" value="name?">
    <hr />
</div>
</form>

如果我使用 $(this).after($(this).clone(true).val('')); 那么它可以工作，但它只克隆一个字段(年龄一) )所以我尝试将其替换为 $('.family').clone().insertAfter(".family"); 来克隆 div 类，但它仅克隆字段一次。如果我开始输入我的第一个 sibling 信息，则会出现第二个表单，但如果我开始在第二个表单上输入，则此后不会出现任何新内容。

这只是一个猜测，但我认为 if 语句不匹配，因此不会创建克隆(我是新人，所以这个想法可能是错误的)。如果是这种情况，那么我很困惑，因为我正在克隆输入字段的相同名称，因此 input[name='age']:last 应该与最后一个年龄字段匹配..不确定.

知道我做错了什么吗？

Answer 1

您必须让 keydown 事件处理程序也记录 future 的元素(即您正在克隆和插入的新 <div> 元素)。

改变

$("input[name='age']").on('keydown', function() {

至

$('form').on('keydown', 'input[name="age"]', function () {

即(还有一些更正/优化)

$('form').on('keydown', 'input[name="age"]:last-child', function() {

    var _p = $(this).parent('.family');

    // insert an empty clone of the current input's containing div
    // ADDED : ... after the current input's containing div
    _p.clone().insertAfter(_p);
}