Select2 在不重新加载页面的情况下无法正常工作答案

【问题标题】：Select2 not working without reloading the pageSelect2 在不重新加载页面的情况下无法正常工作
【发布时间】：2018-12-04 06:22:11
【问题描述】：

我对 Rails 中的 Jquery select2 有疑问我有一个模型工作，其中天是一个下拉菜单，我想使用 Select2 Jquery 输入值。

下面是天字段_form.html.erb

  <div class="field">
<%= form.label :days %>
<%= form.select :days, options_for_select($days), options = {:multiple => true}, :id => "dropdown" %>

应用程序.js

//= require jquery
//= require jquery_ujs
//= require select2-full
//= require activestorage
//= require turbolinks
//= require_tree .


  $(document).ready(function(){

    $( "#dropdown" ).select2({
        theme: "bootstrap"
    });
 });

重新加载页面后select2可以工作，但如果页面通过导航栏中的链接重定向则不工作。

下面的导航栏代码：

<nav>
 <div class="container">
  <ul class="main-menu">
   <li><%= link_to "Home", root_path %></li> 
   <li><%= link_to "new work", new_work_path %></li> 
  </ul>
 </div>
</nav>

application.html.erb：

<!DOCTYPE html>
 <html>
  <head>
   <title>Stack1</title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
   <%= render 'layouts/navbar' %>
   <%= yield %>
  </body>
 </html>

场景是用户在导航栏中点击新作品，输入值显示new_work_path，这里select2不起作用，但重新加载页面后select2起作用。

感谢任何帮助。

【问题讨论】：

标签： jquery ruby-on-rails ruby jquery-select2

【解决方案1】：

终于找到了我的问题的解决方案，我认为答案将帮助在研究时面临同样问题的人。不是监听事件 $(document).ready(function() ，而是监听 $( document ).on('turbolinks:load', function() 的事件，因为 Rails 使用 turbolinks。所以我们应该修改代码为：

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

希望这对以后的相同问题有所帮助。

【讨论】：