Question

我有以下表单字段：

<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-container div 的底部，而不用原始克隆字段的值。

我试图让它工作但它没有正确追加：

$('#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);
});

Answer 1

在添加元素之前，您应该.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/

Answer 2

$('#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/

Answer 3

我认为您没有正确使用: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);
});

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

3 个答案: