Rails环境中Bootstrap 4下拉菜单仅可触发一次问题求助

兄弟，我之前在Rails 5.x + Bootstrap 4的环境里也踩过类似的坑，你这个问题大概率是Turbolinks和Bootstrap组件初始化时机不匹配导致的，结合你的配置我整理了几个排查和修复步骤：

1. 先确认application.js的引入顺序 #

Bootstrap 4对依赖的加载顺序要求很严，必须是jQuery先加载，然后是Popper.js，最后才是Bootstrap。你检查下app/assets/javascripts/application.js，确保内容是这个顺序：

//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .

要是你package.json里装的是普通jquery而非jquery3，就把//= require jquery3改成//= require jquery就行，不过Rails 5.1+更推荐用jquery3适配新版jQuery。

2. 给Turbolinks加个初始化钩子 #

Rails默认的Turbolinks会让页面切换时不重新加载整个文档，这就导致$(document).ready()里的代码只在第一次打开页面时执行一次，后续页面切换或者你点过一次下拉后，组件就没重新初始化了。

解决办法很简单，在application.js末尾加一段代码，把Bootstrap组件的初始化绑定到turbolinks:load事件上：

$(document).on('turbolinks:load', function() {
  // 重新初始化下拉菜单
  $('[data-toggle="dropdown"]').dropdown();
});

要是你还用了tooltip、popover这些组件，也可以一起加进去，写成通用的初始化：

$(document).on('turbolinks:load', function() {
  $('[data-toggle="tooltip"]').tooltip();
  $('[data-toggle="popover"]').popover();
  $('[data-toggle="dropdown"]').dropdown();
});

3. 排查是否有重复引入的JS文件 #

有时候不小心在视图或者其他地方重复引入了jQuery、Bootstrap的JS，就会导致冲突，让组件抽风。你要确保只有application.js里统一引入这些依赖，别在其他地方单独加。

4. 临时禁用Turbolinks验证问题 #

要是上面的方法都没效果，你可以先临时禁用Turbolinks测试下：

• 在application.js里注释掉//= require turbolinks
• 去布局文件app/views/layouts/application.html.erb里删掉所有带data-turbolinks-track的属性
  重启服务器后再点下拉菜单，如果正常了，那肯定就是Turbolinks的锅，回到步骤2的方案就行。

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