动态添加表格行后根据身份证号计算年龄的逻辑异常修复问题

问题原因 #

• 事件重复绑定：每次点击新增行按钮时，都会给页面中所有带.noic类的输入框重新绑定一次blur事件，新增n行后第一行的blur事件会被绑定n次，触发时会执行n次逻辑
• 选择器范围错误：直接用$(".noic")和$(".age")选择元素，会选中页面中所有匹配类名的输入框，取值时取到第一个输入框的值，赋值时也会给所有输入框赋值，自然会全量覆盖

修复方案 #

把原来写在新增行逻辑里的blur事件绑定移除，换成事件委托的方式绑定在表格容器上，同时触发事件时通过$(this)定位当前触发事件的输入框，仅修改当前行对应的年龄输入框。

修改后的完整JS代码如下：

var num = 0;
// 新增表格行
$('#addBtn').on('click', function() {
  $('#tbody').append(`<tr id="${++num}">
             <td class="row-index text-center">
             <p>${num}</p>
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control name">
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control noic">
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control age">
             </td>
              <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button"><span class="glyphicon glyphicon-minus"></span></button>
                </td>
              </tr>`);
});

// 用事件委托绑定身份证号输入框的blur事件，动态新增的元素也能生效
$('#tbody').on('blur', '.noic', function() {
  var currentYear = new Date().getFullYear().toString().substr(-2);
  var yearNow = new Date().getFullYear();
  // 取当前触发事件的身份证号输入框的值
  var yearID = $(this).val().substring(0, 2);
  var age;
  if (yearID > currentYear) {
    age = (+yearNow - (+1900 + +yearID));
  } else {
    age = (+yearNow - (+2000 + +yearID));
  }
  // 仅给当前行的年龄输入框赋值
  $(this).closest('tr').find('.age').val(age);
});

// 删除表格行
$('#tbody').on('click', '.remove', function() {
  var child = $(this).closest('tr').nextAll();
  child.each(function() {
    var id = $(this).attr('id');
    var idx = $(this).children('.row-index').children('p');
    var dig = parseInt(id.substring(1));
    idx.html(`${dig - 1}`);
    $(this).attr('id', `${dig - 1}`);
  });
  $(this).closest('tr').remove();
  num--;
});

补充说明 #

事件委托是把事件绑定到固定存在的父容器上，通过事件冒泡机制匹配触发事件的子元素，非常适合动态新增元素的场景，不需要每次新增元素都重复绑定事件，性能也更好。

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