如何使用jquery将多个动态字段添加到表单&；引导3.1

我需要将多组动态字段添加到表单中，我使用了一个示例来让主字段正常工作，但我需要将javascript设置为特定于“目标”的字段集

您可以看到，当单击add按钮时，它会在file controls div中添加[clones]一个新字段。我需要在单击add按钮时检测父[well，4th Preference]div的类

这是怎么做到的

HTML:

到期
24小时
48小时
72小时
96小时
起源
标签号：
照片：
文件夹：
增加特别优惠

Javascript:

// dynamic add form fields
$(function(){

    $(document).on('click', '.btn-add', function(e){

        console.log('button clicked');
        e.preventDefault();

        var controlForm = $('.file-controls'),
        currentEntry = $(this).parents('.entry:first'),
        newEntry = $(currentEntry.clone()).appendTo(controlForm);

        console.log(controlForm);
        console.log(currentEntry);
        console.log(newEntry);

        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
        .removeClass('btn-add').addClass('btn-remove')
        .removeClass('btn-success').addClass('btn-info')
        .html('<span class="glyphicon glyphicon-minus"></span>');
        }).on('click', '.btn-remove', function(e)
        {

        $(this).parents('.entry:first').remove();

        e.preventDefault();
        return false;

    });

});

//动态添加表单字段
$（函数（）{
$（文档）.on（'click'，'btn add'，函数（e）{
log（“单击按钮”）；
e、 预防默认值（）；
var controlForm=$（'.file controls'），
currentEntry=$（this）.parents（'.entry:first'），
newEntry=$（currentEntry.clone（））.appendTo（controlForm）；
控制台日志（controlForm）；
console.log（currentEntry）；
console.log（newEntry）；
newEntry.find（'input'）.val（''）；
controlForm.find（'.entry:not（：last）.btn add'）
.removeClass（'btn-add'）。addClass（'btn-remove'））
.removeClass（'btn-success'）.addClass（'btn-info'））
.html（“”）；
}).on（'click'，'btn remove'，函数（e）
{
$（this）.parents（'.entry:first'）.remove（）；
e、 预防默认值（）；
返回false；
});
});

您可以给您的容器DIV（“图像控件”、“标记控件”…）另一个类来标识它们为groupcontainer。。。比如“myformgroup”

并用$（this.nexist（identifier）…接近它

例如：

<div class="tag-controls myformgroup"> 
            <div class="entry col-sm-4">
                <div class="input-group">
                    <input class="form-control" name="fields[]" type="text" placeholder="Type something">
                    <div class="input-group-btn">
                        <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus">add</span></button>
                    </div>
                </div>
            </div>
        </div>

但是现在您只能使用控件名和“标识符”作为控件包装器的类

我建议您的按钮使用“数据目标”：

        <div class="row">
        <div class="col-sm-12"><label>Tag numbers: </label></div>

        <div class="tag-controls"> 
            <div class="entry col-sm-4">
                <div class="input-group">
                    <input class="form-control" name="fields[]" type="text" placeholder="Type something">
                    <div class="input-group-btn">
                        <button class="btn btn-success btn-add" data-target="tag-controls" type="button"><span class="glyphicon glyphicon-plus">add</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

---

按钮单击事件中的以下jquery将找到4个前置项：

$(this).parent().parent().parent().parent().attr('class');

最好用一个更独特的类标记这些父类，然后在jquery中使用此类名作为选择器获取

$（this.parents（…）

的集合。下面是您需要的html更改和jquery的一个片段

    //jquery

    console.log($(this).parents('.addBtnCntr').attr('class'));

    <!--html-->    
    <div class="tag-controls addBtnCntr">     
        <div class="entry col-sm-4">
          <div class="input-group">
            <input class="form-control" name="fields[]" type="text" placeholder="Type something">
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

//jquery
console.log（$（this.parents（'.addBtnCntr'）.attr（'class'））；

更简单的方法是：

$(".formClass").append("<input id=3 />");

$（“.formClass”）。追加（“”）；

第四个前身是。图像控件？更改您的

$（this）.parents（'.entry:first'）

到

$（this）.parents（'.image-controls'）谢谢，数据目标看起来是最优雅和可重用的解决方案。我所要做的就是更改jquery:var controlForm=$（““+$（this）.data（）[“target”]），
$(this).parent().parent().parent().parent().attr('class');

    //jquery

    console.log($(this).parents('.addBtnCntr').attr('class'));

    <!--html-->    
    <div class="tag-controls addBtnCntr">     
        <div class="entry col-sm-4">
          <div class="input-group">
            <input class="form-control" name="fields[]" type="text" placeholder="Type something">
            <div class="input-group-btn">
              <button class="btn btn-success btn-add" type="button"><span class="glyphicon glyphicon-plus"></span></button>
            </div>
          </div>
        </div>

      </div>

$(".formClass").append("<input id=3 />");