使用jQuery获取循环模态弹窗中隐藏input值的异常问题

这个坑我太熟了！之前帮好几个朋友排查过类似的情况——明明开发者工具里看隐藏input的值是对的，alert出来却始终是同一个，核心原因就是你没精准定位到当前打开的模态框里的元素，而是用了全局选择器拿到了第一个匹配的元素。

问题根源 #

当你循环渲染模态框时，页面里会有多个结构完全一样的隐藏input（比如都用了同一个类名或ID）。如果你的代码是直接写document.getElementById('hiddenInput').value或者$('.hiddenInput').val()，浏览器/jQuery会直接返回DOM中第一个符合条件的元素的值，自然不会随弹窗变化。

解决方案：精准定位当前模态框内的元素 #

下面给你两种最常用的靠谱写法，任选其一就行：

方案1：利用模态框的show.bs.modal事件绑定

在模态框显示的时候，直接获取当前弹窗里的元素，再给提交按钮绑定事件：

<!-- 循环渲染的模态框示例（用模板引擎语法，Vue/PHP/Thymeleaf都适用） -->
{% for item in dataList %}
<button class="open-modal-btn" data-bs-toggle="modal" data-bs-target="#modal-{{item.id}}">打开弹窗</button>

<div class="modal fade" id="modal-{{item.id}}">
  <div class="modal-content">
    <form class="modal-form">
      <input type="hidden" class="hidden-id" value="{{item.id}}">
      <textarea class="msg-input" placeholder="输入消息"></textarea>
      <button type="button" class="submit-btn">提交</button>
    </form>
  </div>
</div>
{% endfor %}

// 给所有模态框绑定显示事件
document.querySelectorAll('.modal').forEach(modal => {
  modal.addEventListener('show.bs.modal', function() {
    // 这里的this就是当前正在打开的模态框DOM元素
    const currentModal = this;
    const hiddenId = currentModal.querySelector('.hidden-id').value;
    const submitBtn = currentModal.querySelector('.submit-btn');

    // 给当前弹窗的提交按钮绑定点击逻辑（先移除旧绑定避免重复触发）
    submitBtn.onclick = function() {
      const message = currentModal.querySelector('.msg-input').value;
      alert(`隐藏ID：${hiddenId}，消息：${message}`);
      // 这里写你的提交逻辑即可
    }
  });
});

方案2：用事件委托统一处理提交

如果不想给每个模态框单独绑定事件，可以用事件委托，监听文档上的提交按钮点击，再向上找到当前所属的模态框：

document.addEventListener('click', function(e) {
  // 判断点击的是提交按钮
  if (e.target.classList.contains('submit-btn')) {
    // 找到当前按钮所在的表单
    const currentForm = e.target.closest('.modal-form');
    // 从当前表单里拿值，精准定位！
    const hiddenId = currentForm.querySelector('.hidden-id').value;
    const message = currentForm.querySelector('.msg-input').value;
    alert(`隐藏ID：${hiddenId}，消息：${message}`);
    // 提交逻辑
  }
});

关键注意点 #

• 循环生成的模态框和内部元素不要用重复的ID，最好用动态拼接的唯一ID（比如modal-{{item.id}}）或者直接用类选择器。
• 永远不要用全局选择器（比如直接$('.hidden-id')）去拿动态生成元素的值，一定要通过父元素（当前模态框/表单）去查找子元素，确保拿到的是当前弹窗里的那个。

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