CRUD表格内编辑按钮点击无法弹出Bootstrap模态框求助

你遇到的问题核心是两处代码逻辑错误，按优先级修复即可：

1. JS引入顺序错误 #

你自己写的按钮点击事件代码，放在了jQuery、Bootstrap等依赖库的引入标签之前。
浏览器是从上到下解析执行HTML代码的，运行$('.btn-xs-edit').on(...)这段逻辑时，jQuery还没加载，$对象根本不存在，事件绑定直接失败，点击按钮自然没有任何反应。另外Bootstrap的模态框组件强依赖jQuery，必须先加载jQuery再加载Bootstrap JS，组件才能正常运行。

修复方式 #

调整脚本加载顺序，把你自己写的业务代码挪到所有依赖库的后面，参考正确顺序：

<!-- jQuery必须放在所有依赖它的库前面 -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<!-- 其余第三方库顺序保持不变 -->
<script src="lib/jquery-ui-1.9.2.custom.min.js"></script>
<script src="lib/jquery.ui.touch-punch.min.js"></script>
<script class="include" type="text/javascript" src="lib/jquery.dcjqaccordion.2.7.js"></script>
<script src="lib/jquery.scrollTo.min.js"></script>
<script src="lib/jquery.nicescroll.js" type="text/javascript"></script>
<script src="lib/common-scripts.js"></script>

<!-- 自定义业务逻辑放在所有依赖加载完成之后 -->
<script>
  $(document).ready(function () {
    $('.btn-xs-edit').on('click', function () {
      $('#editmodel').modal('show');
    });
  });
</script>

2. 动态内容事件绑定失效 #

如果你的表格行是后续通过AJAX、JS动态渲染追加的（不是页面首次加载就硬编码在HTML里的），上面的直接绑定方式依然会失效——因为页面初始化绑定事件的时候，这些动态生成的编辑按钮还不存在，没有被绑定上点击事件。

修复方式 #

用事件委托的方式绑定，把事件挂载到页面加载时就已经存在的父元素上（比如你的表格tbody），修改代码如下：

$(document).ready(function () {
  // 事件委托给始终存在的表格tbody，后续动态生成的按钮也能触发事件
  $('tbody.ttdody').on('click', '.btn-xs-edit', function () {
    $('#editmodel').modal('show');
  });
});

额外排查项 #

如果改完上述两点还是不生效，按以下顺序检查：

• 按F12打开浏览器开发者工具，看Console面板有没有报错：如果出现$ is not defined，说明jQuery文件路径配置错误，检查lib/jquery/jquery.min.js路径是否能正常访问
• 核对id拼写：你的模态框id是editmodel，调用.modal('show')时不要出现大小写、拼写错误
• 检查模态框HTML位置：不要把模态框代码嵌套在表格、form等元素内部，建议直接放在<body>标签的直接子级位置，避免z-index层级异常、定位错误导致模态框弹出了但被其他元素遮挡看不到。

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