如何用jQuery为EJS动态生成的对应唯一ID表单发起Ajax请求？

这个场景我开发时也碰到过，核心就是要精准定位到点击按钮所属容器里的那个唯一输入框，而不是一股脑选中所有带.uniqId类的元素。下面给你具体的解决方案：

第一步：优化EJS结构（可选但推荐） #

先把每个输入框+按钮的组合包裹在一个父容器里，这样后续查找元素的逻辑会更健壮，不容易因为HTML结构变动而失效：

<% elements.forEach(e => { %>
  <div class="element-item">
    <!-- 如果ID不需要用户可见，用hidden类型更合适 -->
    <input class="uniqId" type="hidden" value="<%=e.id%>">
    <button type="button" class="btn">提交</button>
  </div>
<% }) %>

第二步：编写jQuery逻辑 #

这里要注意别用箭头函数，箭头函数会改变this的指向，导致无法获取到当前点击的按钮元素，用普通函数绑定事件更稳妥：

方案1：通过父容器定位（最健壮） #

$('.btn').on('click', function() {
  // 1. 拿到当前点击的按钮
  // 2. 向上找到最近的父容器.element-item
  // 3. 在父容器内定位到对应的.uniqId输入框，获取它的值
  const targetElementId = $(this).closest('.element-item').find('.uniqId').val();

  // 发起Ajax请求
  $.ajax({
    url: '/your-api-url', // 替换成你的实际接口地址
    method: 'POST', // 或GET，根据接口要求调整
    data: { id: targetElementId },
    success: function(res) {
      console.log('请求成功，返回数据:', res);
      // 这里可以添加成功后的交互，比如提示用户、更新页面内容等
    },
    error: function(xhr, errMsg, err) {
      console.error('请求失败:', err);
      // 处理错误情况，比如显示错误提示
    }
  });
});

方案2：通过兄弟元素定位（适合结构简单的场景） #

如果你的HTML结构固定，按钮和输入框是直接同级的，也可以用.siblings()方法快速找到目标输入框：

$('.btn').on('click', function() {
  const targetElementId = $(this).siblings('.uniqId').val();
  
  // 后续Ajax请求逻辑和上面一致
});

额外提醒：动态生成元素的事件绑定 #

如果这些元素是页面加载完成后通过JS动态添加的（比如异步请求后渲染的），直接绑定事件可能会失效，这时候要用事件委托：

// 把事件绑定到页面已存在的父元素上（比如document，或者更接近的父容器）
$(document).on('click', '.btn', function() {
  const targetElementId = $(this).closest('.element-item').find('.uniqId').val();
  // Ajax请求逻辑同上
});

事件委托利用事件冒泡的特性，不管后续新增多少元素，只要匹配.btn选择器，点击事件都会被触发。

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