如何限制jQuery的append操作仅向表单追加一次新行

你当前代码里的if(i == 1)判断写在了点击事件绑定的外层，只会在页面初次加载完成时执行1次：

• 页面加载时i初始值为1，判断永远成立，点击事件会正常绑定到按钮上
• 事件绑定完成后，后续每次点击按钮都会直接执行回调里的追加逻辑，不会再重新走外层的if判断
• 哪怕回调里执行了i++把值改成2，已经绑定好的点击事件也不会被销毁，所以点击多少次都能新增行，限制完全不生效

下面是三种可直接用的实现方式，选一种替换你原来的jQuery代码即可：

• 方案1：使用jQuery原生one()绑定一次性事件（最简洁）
  one()是jQuery专门用来绑定「仅执行一次」事件的方法，事件触发1次后会自动解绑，不需要自己写计数或解绑逻辑：

$(document).ready(function(){
    $('#add').one('click', function(){
        $('#dynamic_field').append("HERE GOES THE ROW ELEMENTS");
        // 可选：新增完成后把按钮设为禁用样式，给用户明确反馈
        $(this).addClass('disabled').css('color', '#ccc').text('不可重复新增');
    });
});

• 方案2：点击后手动解绑事件（改动最小）
  不需要新增计数器变量，在第一次点击执行完追加逻辑后，直接解绑按钮的点击事件即可：

$(document).ready(function(){
    $('#add').click(function(){
        $('#dynamic_field').append("HERE GOES THE ROW ELEMENTS");
        // 解绑当前按钮的所有click事件
        $(this).off('click');
        // 可选：加禁用样式
        $(this).css('pointer-events', 'none').attr('aria-disabled', 'true');
    });
});

• 方案3：保留计数器逻辑（把判断移到事件内部）
  如果你需要保留计数器变量做后续扩展，把i的判断逻辑移到点击回调内部即可，不要写在事件绑定外层：

$(document).ready(function(){
    var i = 1;
    $('#add').click(function(){
        // 计数器不等于1时直接终止逻辑，不执行追加
        if(i !== 1) return;
        i++;
        $('#dynamic_field').append("HERE GOES THE ROW ELEMENTS");
    });
});

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