克隆内联表单字段并附加到父容器

Clone inline form fields and append to parent container

本文关键字：表单 字段      更新时间：2023-09-26

我有以下表单字段：

<div id="filename-url-container">
    <div class="form-inline form-group">
        <input name="filename[]" class="form-control" placeholder="Filename" type="text">
        <div class="input-group">
            <input name="url[]" class="form-control" placeholder="URL" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default btn-add" type="button">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </span>
        </div>
    </div>
</div>

我想在每次按下按钮时获取第一个子项，并将其附加到filename-url-containerdiv的底部，而不包含原始克隆字段的值。

我试着让它工作，但它没有正确附加：

$('#filename-url-container').on('click', '.btn-add', function (e) {
    e.preventDefault();
    var formGroup= $('#filename-url-container :first-child');
    $('#filename-url-container').append(formGroup);
    console.log(controlForm);
});

在追加元素之前，您应该先.clone这些元素——正如编写的那样，您的代码只需将现有元素移到完全相同的位置。

您还需要约束选择器，否则它将拾取容器中的每个:first-child元素，而不仅仅是直接子元素：

$('#filename-url-container').on('click', '.btn-add', function (e) {
    var formGroup= $('#filename-url-container > :first-child').clone(true);
    formGroup.find('input').val('');   // erase values
    $('#filename-url-container').append(formGroup);
});

演示在http://jsfiddle.net/alnitak/dvqgnga0/

$('#filename-url-container').on('click', '.btn-add', function (e) {
    e.preventDefault();
    var formGroup= $('#filename-url-container div:first-child').html();
    $('#filename-url-container').append(formGroup);
    console.log(formGroup);
});

您需要附加html，而不是将其自身作为对象。http://jsfiddle.net/npdh2v3L/

我认为您没有正确使用:first-child。:first-child指的是它左边类型的第一个子级。除此之外，你只需要摆脱那些价值观。此外，我认为没有必要使用Event.preventDefault()，因为您没有使用提交按钮。

$('#filename-url-container .btn-add').click(function(){
  var clone = $('#filename-url-container .form-group:first-child').clone(true);
  clone.find('input').val('');
  $('#filename-url-container').append(clone);
});
相关文章：