jQuery添加行函数计数器异常问题

问题描述 #

网站上的简易表单存在BUG：点击“Yes”单选按钮后，点击“Add 1 more”按钮3次，本应生成4行内容，实际却生成了约9行重复内容。

问题根源 #

BUG的核心是错误的克隆目标与DOM嵌套逻辑：

• 初始HTML中，.bulk类同时充当容器（#bulkContainer）和包含输入行的父元素
• 点击添加按钮时，代码克隆的是整个.bulk:first容器，再将克隆后的完整容器追加到原容器内部
• 每次克隆都会把当前容器内所有已有的输入行一并复制，导致新添加的内容数量随点击次数呈指数级增长，最终出现大量重复行

修复方案 #

调整DOM结构，将输入行单独作为克隆模板，修改JS克隆逻辑：

修复后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form action="" enctype="multipart/form-data" method="post">
    <div class="form-group">
        <label>Bulk Payments *:</label>
        <div class="radio">
            <label><input name="bulkPayments" type="radio" value="Yes"> Yes</label>
        </div>
        <div class="radio">
            <label><input name="bulkPayments" type="radio" value="No"> No</label>
        </div>
    </div>
    <!-- 调整结构：.bulk仅作为容器，内部行添加独立类作为模板 -->
    <div class="bulk" id="bulkContainer" style="display:none">
        <div class="row bulk-row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="clientName1">Client Name *:</label> 
                    <input autocomplete="one-time-code" class="form-control" id="clientName1" name="clientName1" placeholder="" required="" type="text">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="attachments1">Attachment:</label> 
                    <input class="form-control-file" id="attachments1" name="attachments1" type="file">
                </div>
            </div>
        </div>
    </div>
    <button class="btn" id="addMore">Add 1 more</button>
</form>

修复后的JS代码 #

$(function() {
    // 初始隐藏两个区域
    $(".bulk").hide();
    $(".individual").hide();
    // 监听单选按钮切换
    $("input[name='bulkPayments']").change(function() {
        if ($(this).val() === "Yes") {
            $(".bulk").show();
            $(".individual").hide();
        } else if ($(this).val() === "No") {
            $(".bulk").hide();
            $(".individual").show();
        }
    });
});

$(document).ready(function() {
    var counter = 1;
    $("#addMore").click(function(event) {
        event.preventDefault();
        // 克隆单独的行模板，而非整个容器
        var newRow = $(".bulk-row:first").clone();
        counter++;
        // 更新新行内输入框的ID和name属性
        newRow.find("input[type=text]").attr("id", "clientName" + counter).attr("name", "clientName" + counter);
        newRow.find("input[type=file]").attr("id", "attachments" + counter).attr("name", "attachments" + counter);
        // 清空新行的输入值
        newRow.find("input[type=text]").val("");
        newRow.find("input[type=file]").val("");
        // 将新行追加到容器中
        $("#bulkContainer").append(newRow);
    });
});

修复要点说明 #

1. 给初始输入行添加bulk-row类，作为独立的克隆模板，避免嵌套容器带来的重复复制问题
2. 修改克隆目标为.bulk-row:first，确保每次仅复制一行内容
3. 保持追加位置为#bulkContainer，但现在添加的是单个行元素，而非完整容器，彻底解决指数级重复问题

内容的提问来源于stack exchange，提问作者michaelmcgurk