Bootstrap Modal问题：如何捕获模态框内的链接点击事件？

首先看你代码里的几个小问题，直接导致了点击事件没生效：

1. HTML元素重复ID的问题 #

你的模态框<div>标签同时设置了id="menu"和id="menu-mobile"，HTML规范里一个元素只能有唯一的ID，浏览器在解析时只会识别第一个ID，所以你的选择器$('#menu-mobile a')根本找不到对应的元素，这是核心问题！

先把模态框的ID改成唯一的，比如保留id="menu-mobile"，去掉重复的id="menu"：

<div class="modal fade" id="menu-mobile" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 其余内容保持不变 -->
    </div>
  </div>
</div>

2. 事件绑定的优化 #

即使ID修正了，有时候直接绑定事件也可能因为模态框的动态特性（比如初始隐藏、内容动态加载）失效，推荐两种绑定方式：

方式一：直接绑定（适合静态存在的模态框内容） #

如果你的模态框内容是一开始就写在HTML里的，直接绑定到目标链接即可，建议把选择器写得更精确，避免误选其他链接：

$(document).ready(function() { 
  $('#menu-mobile .modal-body a').click(function(e) {
    e.preventDefault(); // 可选，阻止链接默认的锚点跳转行为
    alert('链接被点击啦！'); 
  }); 
});

方式二：事件委托（更稳妥，适配动态内容） #

如果模态框的内容是通过JS动态插入的（比如异步加载菜单），直接绑定会失效，这时候用事件委托把事件绑定到父级容器（甚至document），就能捕获动态生成元素的点击事件：

$(document).ready(function() { 
  $(document).on('click', '#menu-mobile .modal-body a', function(e) {
    e.preventDefault();
    alert('链接被点击啦！');
  }); 
});

按上面的步骤修改后，模态框内的链接点击事件应该就能正常触发啦！

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