2

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

知道我做错了什么吗?

4

2 回答 2

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);
}
于 2012-07-13T16:54:45.277 回答
3

试试这个:

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

jsFiddle 示例

问题是您正在尝试绑定到尚不存在的元素。要使用 .on() 做到这一点,您只需绑定到 dom 中存在的元素:

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

然后,您要确保只检查和克隆最后一个 div 并且它是输入。请注意,当您克隆输入字段时,您需要更改名称,这样您就不会得到一堆使用相同名称的字段,或者使用 PHP 之类的语言,您可以[]在名称后面附加PHP 会将其解析为一个数组。

于 2012-07-13T16:58:13.873 回答