Javascript 为什么克隆只克隆一次项目？

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

这是我的密码：

$(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类，但它只克隆一次字段。如果我开始键入我的第一个兄弟姐妹信息，则会出现第二个表单，但如果我开始键入第二个表单，则此后不会出现任何新信息

这只是一个猜测，但我认为if语句不匹配，因此没有创建克隆（我是新手，所以这个想法可能是错误的）。如果是这种情况，那么我会感到困惑，因为我正在克隆输入字段的相同名称，所以

input[name='age']：last

应该与last age字段匹配..不确定

---

你知道我做错了什么吗？

你必须让你的

按键式事件处理程序也注意到未来的元素（即你正在克隆和插入的新
元素）

改变

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

到

i、 e.（也有一些修正/优化）
试试这个：

$("form").on('keydown',"input[name='age']:last", function() {
    $('.family:last').clone().insertAfter(".family:last");
})


问题是您试图绑定到尚不存在的元素。要使用.on（）执行此操作，只需绑定到dom中存在的元素：

事件处理程序仅绑定到当前选定的元素；他们
在代码调用.on（）时页上必须存在。
要确保元素存在并且可以选择，请执行事件
在文档就绪处理程序中为
页面上的HTML标记。如果新的HTML被注入到页面中，
选择元素并在创建新HTML后附加事件处理程序
放入页面中。或者，使用委派事件附加事件
处理程序，如下所述

然后，您需要确保只检查和克隆最后一个div及其输入。请注意，在克隆输入字段时，您需要更改名称，以避免出现使用相同名称的大量字段，或者使用类似PHP的语言，您可以在名称后附加
[]
，PHP会将其解析为数组。
我怀疑
.insertAfter（）
也是错误的，因为它会在每个现有副本之后插入一个副本，而不仅仅是最后一个。是的，我也意识到了这一点。我用未经测试的代码对其进行了编辑。
$('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);
}

$("form").on('keydown',"input[name='age']:last", function() {
    $('.family:last').clone().insertAfter(".family:last");
})