HTML嵌套输入框值获取失败：DOM遍历问题求助

我看了你的代码，发现几个关键问题导致你没法正确获取输入框的值，咱们一步步来修复：

1. 箭头函数导致this指向错误 #

你用箭头函数绑定点击事件，箭头函数的this不会指向触发点击的按钮，而是继承外部作用域的this，所以$(this)根本不是你要的按钮元素，这是核心问题之一。改成普通函数就能让this指向点击的.addTrainee按钮。

2. closest()方法使用错误 #

closest()是向上遍历DOM树找最近的祖先元素，但你要找的.gender、.age这些输入框是按钮的兄弟元素的子节点，不是按钮的祖先。正确的做法是先通过按钮找到最外层的表单容器（比如.add_trainee或者<form>），再用find()去定位对应的输入框。

3. 未阻止表单默认提交行为 #

点击submit按钮会触发表单的默认提交动作，页面会刷新，这会导致你的AJAX请求还没完成就被中断，必须用event.preventDefault()阻止这个默认行为。

4. 冗余的选择器简化 #

比如你写的addBtn.closest('.add_trainee').find('.inp').find('input.fullName')，可以直接简化成addBtn.closest('.add_trainee').find('input.fullName')，不需要嵌套多层find()。

修正后的完整代码： #

handleAddTrainee() {
  let addBtn = $('.addTrainee');
  
  // 改用普通函数绑定事件，确保this指向按钮
  addBtn.on('click', function(event) {
    // 阻止表单默认提交
    event.preventDefault();
    
    // 先获取表单容器，再找对应的输入框
    const $container = $(this).closest('.add_trainee');
    let fullName = $container.find('input.fullName').val();
    let gender = $container.find('input.gender').val();
    let age = $container.find('input.age').val();
    let phoneNumber = $container.find('input.phoneNumber').val();
    let adress = $container.find('input.adress').val();
    let dateMedicalAssuranceEnd = $container.find('input.dateMedicalAssuranceEnd').val();
    let dateMembershipStart = $container.find('input.dateMembershipStart').val();
    let dateMembershipEnd = $container.find('input.dateMembershipEnd').val();
    
    let traineeForm = {
      fullName: fullName,
      gender: gender,
      age: age,
      phoneNumber: phoneNumber,
      adress: adress,
      dateMedicalAssuranceEnd: dateMedicalAssuranceEnd,
      dateMembershipStart: dateMembershipStart,
      dateMembershipEnd: dateMembershipEnd // 补上你之前遗漏的字段
    };
    
    this.gymRepo.addTrainee(traineeForm).then(() => {
      alert("new trainee as been saved");
    });
  });
}

另外提个小细节：你的HTML里输入框的spaceholder应该是placeholder，拼写错误虽然不影响功能，但修正后能让提示文案正常显示，提升用户体验。

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