如何用jQuery读取点击按钮所属父Div内的邮箱输入框值并传入AJAX？

我来帮你搞定这个问题！核心思路就是找到点击按钮所在的父容器，然后只在这个容器里查找邮箱输入框，这样就不会混着读取另一个区域的内容了。下面给你具体的实现方案：

第一步：规范HTML结构 #

首先给两个场景的父Div统一一个类名（比如section-container），邮箱输入框也用统一的类名（比如email-input），按钮用add-email-btn，方便后续选择器定位：

<!-- 申请人区域 -->
<div class="section-container applicant-section">
  <h3>申请人邮箱</h3>
  <input type="email" class="email-input" placeholder="请输入邮箱">
  <input type="email" class="email-input" placeholder="请输入邮箱">
  <button class="add-email-btn">添加邮箱</button>
</div>

<!-- 联系人区域 -->
<div class="section-container contact-section">
  <h3>联系人邮箱</h3>
  <input type="email" class="email-input" placeholder="请输入邮箱">
  <input type="email" class="email-input" placeholder="请输入邮箱">
  <button class="add-email-btn">添加邮箱</button>
</div>

第二步：原生JavaScript实现逻辑 #

这里用事件委托监听按钮点击（好处是动态生成的按钮也能生效），核心是用closest()方法精准定位当前按钮的父容器：

// 监听全局点击事件，判断是否点击了添加邮箱按钮
document.addEventListener('click', function(event) {
  if (!event.target.classList.contains('add-email-btn')) return;

  // 找到当前按钮所属的父容器
  const parentContainer = event.target.closest('.section-container');
  if (!parentContainer) {
    console.warn('未找到对应的父容器');
    return;
  }

  // 只在当前父容器内收集邮箱输入框的值，过滤空值和无效格式
  const emailInputs = parentContainer.querySelectorAll('.email-input');
  const validEmails = Array.from(emailInputs)
    .map(input => input.value.trim())
    .filter(value => value !== '')
    .filter(email => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email));

  // 没有有效邮箱时提示用户
  if (validEmails.length === 0) {
    alert('请输入至少一个有效的邮箱地址');
    return;
  }

  // 发送AJAX请求，这里用fetch示例，也可以用XMLHttpRequest
  fetch('/your-api-url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ emails: validEmails }),
  })
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => {
    console.log('邮箱添加成功:', data);
    // 成功后可以做些操作，比如清空输入框、显示成功提示
    emailInputs.forEach(input => input.value = '');
    alert('邮箱添加成功！');
  })
  .catch(error => {
    console.error('添加邮箱出错:', error);
    alert('添加邮箱失败，请稍后重试');
  });
});

可选：jQuery简化实现 #

如果你项目里用了jQuery，代码会更简洁：

$(document).on('click', '.add-email-btn', function() {
  // 定位当前按钮的父容器
  const $parent = $(this).closest('.section-container');
  
  // 收集有效邮箱
  const validEmails = $parent.find('.email-input')
    .map(function() {
      return $(this).val().trim();
    })
    .get()
    .filter(val => val !== '')
    .filter(email => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email));

  if (validEmails.length === 0) {
    alert('请输入至少一个有效的邮箱地址');
    return;
  }

  // 发送AJAX请求
  $.ajax({
    url: '/your-api-url',
    method: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ emails: validEmails }),
    success: function(data) {
      console.log('成功:', data);
      $parent.find('.email-input').val('');
      alert('邮箱添加成功！');
    },
    error: function(xhr, status, error) {
      console.error('出错:', error);
      alert('添加邮箱失败，请稍后重试');
    }
  });
});

关键知识点说明 #

• closest('.section-container')：从点击的按钮开始向上查找最近的匹配父元素，这是实现“只读取同区域邮箱”的核心，确保不会跨容器读取内容。
• 事件委托：不需要给每个按钮单独绑定事件，即使后续动态添加更多邮箱输入框或按钮，代码依然有效。
• 邮箱格式验证：用正则表达式过滤无效邮箱，避免向接口传递垃圾数据。

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