jQuery multiple form repeater多targetDiv表单重复失效问题求解

数据老陈

2026-10-18

问题解决方法

问题根因

原有JS代码中controlForm固定选中页面第一个.fvrduplicate容器，没有关联当前点击按钮所属的分组，导致所有新增条目都追加到第一个表单分组内。

修复方案

仅需修改controlForm的取值逻辑，从当前点击的添加按钮出发，向上查找所属的.fvrduplicate容器即可，修改后的完整JS代码如下：

$(function() {
    $(document).on('click', '.btn-add', function(e) {
        e.preventDefault();
        // 核心修改：查找当前按钮所属的fvrduplicate容器，而不是取全局第一个
        var controlForm = $(this).closest('.fvrduplicate'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);
        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<i class="fa fa-minus" aria-hidden="true"></i>');
    }).on('click', '.btn-remove', function(e) {
        e.preventDefault();
        $(this).parents('.entry:first').remove();
        return false;
    });
});