点击地图几何元素无法激活Bootstrap Modal该如何解决？

核心错误原因 #

1. jQuery ID选择器必须带#前缀，你当前存储的modal_name值只有纯ID字符串，没有#，导致jQuery无法定位到对应的模态框DOM元素
2. 模板渲染storyPointDict的逻辑错误，最后一个ID会被重复生成两次，多余的重复条目可能导致逻辑异常

修正后代码 #

地图点击事件JS代码 #

map.on('singleclick', function(evt) {
  const attributeTable = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    return feature;
  });

  // 修正字典渲染逻辑，删除重复的最后一项
  const storyPointDict = [
  {% for storypoint in single_object.stop_point.all %}
      {
        id: {{ storypoint.id }},
        // 直接补全ID选择器需要的#前缀
        modal_name: '#storyPoint{{ storypoint.id }}'
      }{% if not forloop.last %},{% endif %}
  {% endfor %}
  ];

  if (attributeTable) {
    const fid = attributeTable.get('pk');
    // 直接匹配对应ID的模态框，无需遍历整个字典
    const targetModal = storyPointDict.find(item => item.id == fid);
    if (targetModal) {
      $(targetModal.modal_name).modal('show');
    }
  }
});

可选排查项 #

如果修改后仍无法触发，可按以下步骤排查：

• 打开浏览器开发者工具控制台，在触发模态框的代码前加console.log(targetModal.modal_name)，确认输出的字符串和页面上模态框的id属性完全一致
• 如果你使用的是Bootstrap 5，原生API不需要依赖jQuery，可替换触发逻辑为：

const modalEl = document.querySelector(targetModal.modal_name);
const modalInstance = new bootstrap.Modal(modalEl);
modalInstance.show();

• 确认几何要素的pk属性值和后端渲染的storypoint.id值类型、数值完全匹配

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