如何独立单独发送并插入每个dataContainer容器的数值？

这问题其实挺典型的，核心就是要把操作范围限制在当前点击按钮所属的dataContainer里，别去全局找元素就行。我给你一套完整的实现方案，分原生JS和jQuery两种写法，你可以根据自己的项目情况选用：

第一步：HTML结构示例 #

先给每个dataContainer配置独立的输入框、提交按钮和结果展示区，确保结构清晰：

<!-- 第一个独立容器 -->
<div class="dataContainer">
  <input type="text" class="inputField" placeholder="输入要提交的内容">
  <button class="submitBtn">提交</button>
  <div class="resultDisplay"></div> <!-- 用来展示当前容器的返回结果 -->
</div>

<!-- 第二个独立容器 -->
<div class="dataContainer">
  <input type="text" class="inputField" placeholder="输入要提交的内容">
  <button class="submitBtn">提交</button>
  <div class="resultDisplay"></div>
</div>

<!-- 可继续添加更多dataContainer -->

第二步：原生JavaScript实现（推荐，无需依赖库） #

用事件委托的方式监听点击，哪怕后续动态新增dataContainer，代码依然有效：

// 监听全局点击事件，只处理submitBtn的点击
document.addEventListener('click', function(e) {
  // 确认点击的是提交按钮
  if (!e.target.classList.contains('submitBtn')) return;

  // 关键：找到当前按钮所属的dataContainer容器
  const currentContainer = e.target.closest('.dataContainer');
  if (!currentContainer) return; // 极端情况，没找到容器就退出

  // 只在当前容器内找输入框，获取值
  const inputValue = currentContainer.querySelector('.inputField').value.trim();
  if (!inputValue) {
    alert('请输入内容再提交');
    return;
  }

  const resultArea = currentContainer.querySelector('.resultDisplay');
  // 显示加载状态，提升用户体验
  resultArea.textContent = '正在提交...';

  // 发送AJAX请求，替换成你的实际接口地址
  fetch('/your-api-url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ value: inputValue }),
  })
  .then(response => {
    if (!response.ok) throw new Error('请求失败，请重试');
    return response.json();
  })
  .then(data => {
    // 把结果插入当前容器的展示区，不会影响其他容器
    resultArea.textContent = `提交成功！返回值：${data.result}`;
  })
  .catch(error => {
    resultArea.textContent = `提交失败：${error.message}`;
  });
});

可选：jQuery版本实现 #

如果你的项目已经在用jQuery，也可以用这种写法：

// 事件委托监听按钮点击
$(document).on('click', '.submitBtn', function() {
  // 找到当前按钮所属的dataContainer
  const $container = $(this).closest('.dataContainer');
  // 只获取当前容器内的输入值
  const inputValue = $container.find('.inputField').val().trim();

  if (!inputValue) {
    alert('请输入内容再提交');
    return;
  }

  const $resultArea = $container.find('.resultDisplay');
  $resultArea.text('正在提交...');

  // 发送AJAX请求
  $.ajax({
    url: '/your-api-url',
    method: 'POST',
    data: { value: inputValue },
    success: function(data) {
      $resultArea.text(`提交成功！返回值：${data.result}`);
    },
    error: function(xhr, status, error) {
      $resultArea.text(`提交失败：${error}`);
    }
  });
});

核心要点说明 #

• 精准定位容器：用closest('.dataContainer')（原生JS）或$(this).closest('.dataContainer')（jQuery）找到当前按钮的父级容器，这是实现独立操作的关键，确保所有操作都只在这个容器内进行。
• 局部查找元素：在容器范围内用querySelector或find获取输入框和结果区，避免使用全局选择器（比如document.querySelector('.inputField')）拿到其他容器的元素。
• 事件委托优势：不需要给每个按钮单独绑定事件，新增的dataContainer也能自动生效，性能更优。

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