リロードをせずに、jQueryを使ったタブの切り替えをしたい

Question

###前提・実現したいこと
railsを使用して、あるWebサービスを作っていて、webページのログイン画面で、jQueryを使ってタブの切り替え機能を作リました。しかし、いざ実行をしてみると、ページに移動し、タブをクリックしても反応をせず、一度サイトのリロードをすると、タブが切り替わる、というような状況です。なぜ一度リロードしなければ、タブが正常に動作をしないのかがわからず、質問させていただいております。

###発生している問題・エラーメッセージ
エラーメッセージ

Chrome上でインスペクトした時に出てきました。
highstock.js?body=1:9 Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16

###application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock


$(function(){
  $('#tab-menu li').on('click', function(){
    if($(this).not('selected')){
      // タブメニュー
      $(this).addClass('selected').siblings('li').removeClass('selected');
      // タブの中身
      var index = $('#tab-menu li').index(this);
      $('#tab-box div').eq(index).addClass('selected').siblings('div').removeClass('selected');
    }
  });
});

###new.html.erb

...
  <div id="tab-menu" class="tab-menu label">
            <ul>
              <li class="selected"><p>大学生</p></li>
              <li><p>社会人</p></li>
              <li><p>その他</p></li>
            </ul>

        <div id ="tab-box" class="label">
          <div class="selected">
            <%= f.label :文理選択 %><br />
            <%= f.select :culture_or_science, ['文系', '理系'] %>

            <br /><%= f.label :大学%>
            <%= f.text_field :university, :placeholder =>'大学名を入力してください'%>

            <%= f.label :学部%><br />
            <%= f.text_field :department, :placeholder => '学部の種類を選択してください'%>

            <%= f.label :卒業年%><br />
            <%= f.text_field :graduation_year, :placeholder => '卒業される年度を記入してください'%>
        </div>


       <div>
              <%= f.label :会社名 %><br />
              <%= f.text_field :company, :placeholder => '会社名を記入してください'%>
      </div>


      <div>
            <%= f.label :その他の所属 %><br />
            <%= f.text_field :other, :placeholder => '所属名を記入してください'%>
          </div>
      </div>

###application.css

.tab-menu ul {
  width:100%;
  margin: 0;
  padding: 0;
}

.tab-menu li {
  display: inline-block;
  width: 32%;
  height: 22px;
  cursor: pointer;
  background-color: #81D0FE;
  font-size: 14px;
  color: #fff;
  border-top-right-radius:5px;
  border-top-left-radius:5px;
  text-align: center;
}

.tab-menu li.selected {
  background-color: #fff;
  color: #81D0FE;
}

.contents {
  height: 360px;
  padding: 20px;
}

#tab-box div{
  display: none;
}
#tab-box div.selected {
  display: block;
  -webkit-animation: anime1 2s ease;
}

###試したこと
(javascriptはほぼ初めて触るので)Highcharts error #16: というエラーが意味することをあまり理解することができませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
-railsの"devise"gemを使用してログイン画面を作っております。
-application.js上に"//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
"記述しています。
足りない情報がございましたら、追記いたします。ご回答心よりお待ちしております。
by駆け出しのrubyプログラマー

Answer 1

turbolinks5によるものです。
JSをそのままコピペではなく
確かこういうふうに置き換えると治ったと思います。

document.addEventListener("turbolinks:load", function() {
 $('#tab-menu li').on('click', function(){
    if($(this).not('selected')){
      // タブメニュー
      $(this).addClass('selected').siblings('li').removeClass('selected');
      // タブの中身
      var index = $('#tab-menu li').index(this);
      $('#tab-box div').eq(index).addClass('selected').siblings('div').removeClass('selected');
    }
  });
})

参考サイト

Comments

[ShouheyHayashi]

無事解決しました。本当にありがとうございます！