添加Select下拉选项后，动态增删行功能无法完全正常工作

我仔细对比了你的正常版本和异常版本代码，发现问题出在动态元素的事件绑定逻辑以及克隆下拉菜单时的状态处理上——控制台没报错是因为没有语法错误，只是逻辑上的问题导致功能失效，下面给你具体的修复方案：

1. 事件绑定改用委托方式 #

原来的代码可能是直接给删除按钮绑定点击事件，比如：

$('.delete-btn').click(function() {
  $(this).closest('.row').remove();
});

这种方式只能给页面加载时已存在的按钮绑定事件，动态新增的行里的按钮不会触发事件。改成事件委托就能解决：

$(document).on('click', '.delete-btn', function() {
  $(this).closest('.row').remove();
});

委托到document（或者更接近的父容器），就能捕获动态生成元素的点击事件。

2. 克隆行时重置下拉菜单状态 #

添加下拉菜单后，克隆行的时候会把原行下拉菜单的选中状态也复制过来，同时如果下拉菜单有重复的id或name属性，也可能导致表单逻辑混乱。所以克隆后要做两件事：

// 克隆第一行作为新行
var newRow = $('.row').first().clone();
// 重置下拉菜单选中状态为默认选项
newRow.find('select').prop('selectedIndex', 0);
// 给新行的下拉菜单设置唯一的name（避免表单提交时冲突）
var rowCount = $('.row').length + 1;
newRow.find('select').attr('name', 'dropdown-' + rowCount);
// 把新行添加到容器中
$('#input-container').append(newRow);

补充：原无下拉菜单的HTML片段参考 #

无下拉菜单时的HTML代码片段：

<div class="row"> 
  <div class="col-md-3"> </div> 
  <div class="col-md-6" id="inputfor...

按照上面的方法修改后，动态增删行的功能就能恢复正常了，既保留了下拉菜单，又不会影响原有功能的运行。

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