Rails 4.2.4 + Ruby 2.2.4中Turbolinks与Select2兼容问题求助

这个问题我碰到好多次了，本质就是Turbolinks的页面加载机制和传统的$(document).ready事件不兼容导致的——Turbolinks拦截页面跳转时不会刷新整个页面，只会替换页面的核心内容，所以首次加载后触发的ready事件，在后续跳转时根本不会执行，Select2自然就没被初始化。

下面给你几个靠谱的解决方案：

方案一：替换为Turbolinks专属事件 #

把你内联脚本里的$(document).ready换成Turbolinks提供的turbolinks:load事件，这个事件会在首次加载页面和每次Turbolinks跳转后都触发，完美适配场景：

修改index.html.erb里的脚本：

<script>
  $(document).on('turbolinks:load', function() {
    $("#e1").select2();
  });
</script>

方案二：把初始化代码移到asset pipeline（更规范） #

Rails项目里尽量避免内联脚本，把初始化代码放到application.js里更符合规范，同时也能全局生效：

在application.js末尾添加：

$(document).on('turbolinks:load', function() {
  $("#e1").select2();
});

之后记得移除index.html.erb里的内联脚本。

方案三：批量初始化+避免重复实例（进阶） #

如果你有多个需要用Select2的下拉框，建议给它们统一加个类名（比如select2-enabled），然后批量初始化，同时还要处理重复初始化的问题（Turbolinks可能保留旧的DOM引用）：

在application.js里写：

$(document).on('turbolinks:load', function() {
  $(".select2-enabled").each(function() {
    // 先销毁已存在的Select2实例，避免冲突
    if ($(this).data('select2')) {
      $(this).select2('destroy');
    }
    // 重新初始化
    $(this).select2();
  });
});

然后在你的视图里给需要的select标签加类：

<select id="e1" class="select2-enabled">
  <!-- 选项内容 -->
</select>

这样不管是首次加载还是Turbolinks跳转，所有标记了类的下拉框都会被正确初始化，还不会出现重复绑定的问题。

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