Bootstrap模态框ID大于1000时无法显示的问题求助

问题本质 #

HTML的ID允许包含数字（只要不以纯数字开头，你的edit-{{data.pk}}格式符合规范），所以数值大小本身不是问题，大概率是动态渲染时的ID重复、或者Bootstrap对批量动态元素的事件绑定失效。

解决方案 #

1. 排查并确保ID全局唯一 #

打开浏览器开发者工具（F12），搜索edit-1001这类大数值ID，确认页面中没有重复的ID：

• 如果存在重复ID，Bootstrap只会识别第一个匹配的模态框，导致后续的无法触发。
• 检查模板逻辑，确保每个<tr>对应的模态框id都是唯一的（比如是否存在循环渲染时的变量错误）。

2. 改用JS手动触发模态框（推荐） #

放弃data-toggle/data-target的自动绑定，用事件委托实现更可靠的触发，适合大量动态生成的元素：

步骤1：修改标签

<td class="open-edit-modal" data-pk="{{data.pk}}">{{data.prk.rekap_user_induk}}</td>

步骤2：修改模态框标签

<div class="modal fade edit-modal" data-pk="{{data.pk}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <!-- 模态框原有内容保持不变 -->
</div>

步骤3：添加JS事件监听

// 事件委托，兼容动态生成的元素
document.addEventListener('click', function(e) {
  const trigger = e.target.closest('.open-edit-modal');
  if (!trigger) return;

  const targetPk = trigger.getAttribute('data-pk');
  const modal = document.querySelector(`.edit-modal[data-pk="${targetPk}"]`);
  
  if (modal) {
    // Bootstrap 5+版本的模态框初始化与显示写法
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
  }
});

3. 升级Bootstrap版本 #

如果你使用的是Bootstrap 3或更早版本，旧版的选择器解析可能存在兼容性问题，升级到最新稳定版（v5.x）可以解决这类隐藏的bug。

关于十六进制临时方案的说明 #

转十六进制能暂时生效大概率是巧合（比如恰好避免了重复ID），但这不是根本解决方法，随着数值增长，依然会遇到相同问题。

内容的提问来源于stack exchange，提问作者Andi Fathul Mukminin