特定のjsファイルだけ発火しない。

Question

前提・実現したいこと

クリックイベントにてモーダルを表示させようとしているのですが、クリックしても何も起こりません。

他のjsファイルはきちんと動いております。また今回作成したjsファイルも他のjsファイル同様、app>assets>javascriptsフォルダ内に保存してあります。

users/edit.html.erb

<div id="login-show" class="login">ログイン</div>
<div id="login-modal" class="login-modal-wrapper">
  <div class="modal">
    <div id="login-form">
      <h2>Emailログイン</h2>
      <form action="#">
        <input class="form-control" type="text" placeholder="メールアドレス">
        <input class="form-control" type="password" placeholder="パスワード">
        <div id="submit-btn">ログイン</div>
      </form>
    </div>
  </div>
</div>

scss

.login-modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}

.modal {
  position: absolute;
  top: 20%;
  left: 34%;
  background-color: #e6ecf0;
  padding: 20px 0 40px;
  border-radius: 10px;
  width: 450px;
  height: auto;
  text-align: center;
}

script.js

$(function() {
  $('#login-show').click(function() {
    $('#login-modal').fadeIn();
  });  
});

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, or any plugin's
// vendor/assets/javascripts directory 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//
//= require jquery
//= require jquery_ujs
//
//= require cocoon
//
//= require_tree .

試したこと

モーダルで表示させたい箇所のdisplay: none;をコメントアウトしてみた所、そこはきちんと表示されました。ですのでjsファイルが何かしらの理由で動いていないのだと思いました。

また以下の様にdebuggerを記述してから該当のクリックイベント箇所をクリックしてみましたが、デベロッパーツールを見ると処理が止まっていませんでした。

script.js

$(function() {
  $('#login-show').click(function() {
　　debugger
    $('#login-modal').fadeIn();
  });  
});

補足情報（FW/ツールのバージョンなど）

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3
jQuery 1.12.4

Answer 1

jsファイルを以下の様に記述する事で解決致しました。

script.js

$(function() {
  $('#login-show').click(function() {
    $('#login-modal').fadeIn();
  });  
});

↓

document.addEventListener("turbolinks:load", () => {
  $(function() {
    $('#login-show').click(function() {
      $('#login-modal').fadeIn();
    });
  });
})

こちらのサイトを参考にさせて頂きましたが、Turbolinksが原因でした。

通常であればページが読み込まれたタイミングでloadイベントが発生するが、Turbolinks によって画面が切り替わった場合はloadイベントは発生しない。
その為、ページ読み込みを起点としたJavascriptは機能しなくなる。イベントを発生させたい場合は、Turbolinksを無効化させる必要がある。