jQuery中append()方法运行异常：点击按钮重复追加多行如何解决

你代码的核心问题有两点：

• 每次获取的是第一个.row的内部HTML，而非固定的单行模板。第一次点击追加后，第一个.row内部已经存在2个输入框，第二次再读取它的内部HTML就会拿到2个输入框的代码，追加后自然新增2行，后续点击还会出现新增4行、8行的指数级增长问题
• 你是把内容追加到了现有.row的内部，而非新增一个独立的.row行，不符合新增行的需求

你需要克隆完整的.row元素作为追加内容，每次点击直接将新行插入到父容器即可，修改后的JS代码如下：

$(function() {
  // 提前缓存初始行模板，避免后续内容变化后取到错误的模板
  const $rowTpl = $('.room-info .row:first').clone();
  $('.add-more-room-btn').click(function() {
    const $newRow = $rowTpl.clone();
    // 把新行追加到room-info容器内，和原有行同级
    $(this).parents('.room-info').append($newRow);
  });
});

如果你需要保留之前新增行里已输入的内容，也可以选择克隆最后一行实现：

$(function() {
  $('.add-more-room-btn').click(function() {
    const $lastRow = $(this).parents('.room-info').find('.row:last').clone();
    // 如果需要清空新行的输入值，可取消注释下面这行
    // $lastRow.find('input').val('');
    $(this).parents('.room-info').append($lastRow);
  });
});

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