如何避免多次运行代码时重复向表单添加行？（jQuery新手求助）

嘿，作为jQuery新手碰到这个重复添加的问题太常见啦！我来给你几个简单又实用的方案，保证每行内容只会被添加一次～

这是最通用的办法——在添加之前，先确认表单里有没有你要加的那一行。你可以给要添加的行加一个唯一的类名或者data属性，用来做判断标识。

示例代码：

// 定义要添加的行，给它一个唯一类名
const targetRow = '<div class="only-once-row">我是只会出现一次的内容</div>';
const $form = $('.your-target-form'); // 你的表单选择器

// 检查表单里是否已经有这个类名的元素
if (!$form.find('.only-once-row').length) {
  $form.append(targetRow);
}

如果你的添加逻辑是绑定在某个函数里，且不需要考虑多个表单的情况，可以用一个布尔变量来记录是否已经添加过。

示例代码：

// 初始化标记为未添加
let hasAddedRow = false;

function addUniqueRow() {
  if (!hasAddedRow) {
    $('.your-form').append('<div>我只会被添加一次</div>');
    hasAddedRow = true; // 添加后把标记改成已添加
  }
}

如果你的添加操作是由事件触发的（比如按钮点击），直接用.one()代替.on()，它会确保事件处理函数只执行一次。

示例代码：

// 绑定按钮点击事件，这个点击只会触发一次添加逻辑
$('.add-row-button').one('click', function() {
  $(this).closest('form').append('<div>点击一次就够啦</div>');
});

如果你的表单是动态生成的（比如通过AJAX加载出来的），记得用事件委托配合存在检查：

// 委托事件到静态父元素，确保动态生成的表单也能触发
$(document).on('click', '.dynamic-add-btn', function() {
  const $currentForm = $(this).closest('form');
  // 检查当前表单里是否已经有目标行
  if (!$currentForm.find('.unique-row').length) {
    $currentForm.append('<div class="unique-row">动态表单里的唯一行</div>');
  }
});

这些方法都能很好地解决重复添加的问题，你可以根据自己的场景选最合适的～

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