Railsでリンク先で外部Jsライブラリが読み込めない時がある不具合の解決方法が知りたいです

お世話になっております。
Formでタグ機能を追加したく、開発を進めております。

困っている問題はタグ機能を実装している/posts/newにアクセスした時に、jsが効かずにタグの入力フォームが表示されないことです。リロードをすると読み込まれて正常に機能するようになりますが、一発で有効化させるにはどうしたら良いでしょうか。turbolinksを無効化したり、しましたが、うまくいかずハマっております。
お手数おかけしますが、アドバイスいただけないでしょうか？
タグ入力補助としてjsライブラリのTag-itというものを使っております。

タグ機能の参考リンク

↓不具合発生時のスクショです

↓リロードした場合には正常に表示されます。

Ruby
1Gemfile
2
3gem 'acts-as-taggable-on'
4gem 'tag-it-rails'


  def new
    @all_tag_list = ActsAsTaggableOn::Tag.all.pluck(:name)
    @post = Post.new
  end

ruby
1new.html.erb
2
3<div class="mt50">
4   <p>タグ</p>
5   <ul id="post_interest_list" class="">
6   </ul>
7   <%= javascript_tag do %>
8     var Tags = {
9     all_tag_list: <%= raw @all_tag_list %>
10     };
11   <% end %>
12</div>
13
14<script>
15console.log("テスト");
16$(document).on('ready page:load', function() {
17  return $('#post_interest_list').tagit({
18    singleField: true,
19    availableTags: Tags.all_tag_list
20  });
21});
22</script>

ruby
1application.html
2
3
4
5<!DOCTYPE html>
6<html lang=ja>
7  <head>
8    <%= favicon_link_tag('favi12.ico') %>
9    <%= analytics_init if Rails.env.production? %>
10    <% set_meta_tags :site => 'テスト',
11                     :description => '',
12                    :open_graph => {
13                      :title => '',
14                      :type  => :website,
15                      :url   => '/',
16                      :image => 'http://ia.media-imdb.com/rock.jpg'
17                   }, :reverse => true %>
18    <%= display_meta_tags %>
19    <meta charset="utf-8"/>
20    <%= csrf_meta_tags %>
21    <%= include_gon %>
22    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
23    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
24
25
26    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
27    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
28    <script async src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
29    <%#= javascript_include_tag 'application' %>
30
31  </head>
32

ruby
1application.js
2
3
4
5//= require jquery
6//= require rails-ujs
7//= require jquery.turbolinks
8//= require turbolinks
9//= require_tree .
10//= require jquery.validationEngine-ja
11//= require jquery.validationEngine
12//= require clipboard.js-master
13//= require jquery-ui
14//= require tag-it

次試してみることとしては、読み込みを遅らせてみようと思っております。

お手数おかけしますが、何かわかる方いましたらアドバイスいただけるととても助かります。
すみませんが、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryのバージョンがわからないので確定的なことはいえませんが、jQuery 3では、$(document).on('ready')という書き方は動かなくなっています（jQuery公式）。

シンプルに、$(関数)で書きましょう。

javascript
1function main(){
2  $('#post_interest_list').tagit({
3    singleField: true,
4    availableTags: Tags.all_tag_list
5  });
6}
7
8$(main);
9// turbolinks用；turbolinksを止めるなら不要
10$(document).on('page:load', main);