为什么克隆只克隆项目一次?

时间:2012-07-13 16:50:20

标签: javascript jquery

我是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应与最后一个年龄字段匹配。不确定。

知道我做错了吗?

2 个答案:

答案 0 :(得分:4)

您必须让您的keydown事件处理程序同时注意未来的元素(即您正在克隆和插入的新<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);
}

答案 1 :(得分:3)

试试这个:

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

<强> jsFiddle example

问题在于您尝试绑定到尚不存在的元素。要使用.on()执行此操作,您只需要绑定到dom中存在的元素:

  

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

然后,你要确保你只是检查和克隆最后一个div及其输入。请注意,当您克隆输入字段时,您需要更改名称,这样您就不会得到一堆使用相同名称的名称,或者使用像PHP这样的语言来添加{{1}在名称和PHP之后将其解析为数组。