【Rails6】リロードしないとjsやjQueryが動かない解決方法

初心者（自分もですが）サイトをリロードしないとjsやjQueryが動かない…なぜ？？？

javascriptやをjQuery実装したのにページ遷移した後に動かないけど、リロードしたら動くんですよね。

原因はhead内の読み込みタグにターボリンク（turbolinks）が入っているからです。

これを消してもいいのですが、このgemはページのロードをする際に少しだけ早くしてくれるため消しにくいのですよね。

そういう場合の解決方法を簡単に載せておきます。

リロードしないと反映されない時のコード

下記は、僕が実際に使って、実装したのにページ遷移した後に動かない時のコードです。

  $(function () {
    function post() {
      $(".news-btn, .popup-bg").on("click", function () {
        $(".popup-post").toggleClass("postActive");
        $(".popup-bg").toggleClass("postActive");
      });
    }
    post();
  });

解決方法

下記コードを追加することによって解決できます。

  document.addEventListener("turbolinks:load", function () {
    $(function () {
      function post() {
        $(".news-btn, .popup-bg").on("click", function () {
          $(".popup-post").toggleClass("postActive");
          $(".popup-bg").toggleClass("postActive");
        });
      }
      post();
    });
  });

これで無事にいちいちサイトをリロードせずにjsやjQueryが動きました！