Bootstrap 3+Rails 5中$(...).modal is not a function问题求助

看起来你遇到的核心问题是脚本执行时机不对——在Turbolinks环境下，直接内联调用$('#myModal').modal('show')时，Bootstrap的Modal组件可能还没完成加载，或者Turbolinks还没完成页面初始化。而按钮能正常触发是因为点击事件是在DOM和所有JS资源就绪后才触发的，不会踩这个时机坑。

下面是几个可行的解决方案：

方案1：利用Turbolinks的turbolinks:load事件触发模态框 #

Turbolinks会拦截常规页面跳转，传统的$(document).ready()并不总是可靠。改用Turbolinks提供的turbolinks:load事件，能确保在页面完全加载（包括Turbolinks初始化、所有JS资产加载完成）后再执行模态框显示逻辑：

修改你index.html.erb里的内联脚本：

$(document).on('turbolinks:load', function() {
  // 先检查模态框元素是否存在，避免无意义报错
  if ($('#myModal').length) {
    $('#myModal').modal('show');
  }
});

方案2：将脚本移到资产管道文件中（更符合Rails规范） #

内联脚本不是最佳实践，你可以把模态框的触发逻辑放到单独的JS文件里：

1. 在app/assets/javascripts/目录下新建modal_auto_load.js文件
2. 写入以下内容：

$(document).on('turbolinks:load', function() {
  // 只在包含目标模态框的页面触发逻辑
  if ($('#myModal').length) {
    $('#myModal').modal('show');
  }
});

3. 你的application.js里已经有//= require_tree .，会自动加载这个新文件，无需额外配置

额外排查点 #

• 确认application.js加载顺序：你的配置里jquery在bootstrap-sprockets之前，这是正确的，能保证Bootstrap依赖的jQuery先加载完成。
• 检查是否存在多jQuery实例冲突：打开浏览器控制台，输入jQuery.fn.jquery查看版本，确保没有重复引入jQuery导致的作用域问题。
• 验证Bootstrap JS加载状态：控制台输入$.fn.modal，如果返回函数说明Modal组件已正确加载；如果返回undefined，则需要检查bootstrap-sprockets是否正确引入。

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