特定の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

Comments

[siruku6]

app>assets>javascripts>application.js ファイルも質問文に掲載してみていただけますか？

[punchan36]

有難うございます。application.jsを追記致しました。
宜しくお願い致します。

[siruku6]

`require_tree .`が記載されているので、`app>assets>javascripts`の直下に配置されているファイルは全て読み込まれているように見えますね....

そうしたら今度は、F12開発者ツールで、期待するファイルがブラウザに届いているか確認してみるとどうでしょうか？？

キーボードの「F12」キーを押下した後に、「Sources」などと書かれているタブを開くと、現在ブラウザに読み込まれているファイルの一覧が表示されます。

[siruku6]

ちなみにですが、`debugger`は、click()ブロックの中ではなく、その外に、つまりfunction()関数内の一番上に書いてみましょう。

click()の中だと、click()呼び出しに成功したときしかdebuggerに到達することができませんので。

[punchan36]

有難うございます！
`debugger`をscript.jsの一番上の行に書いた上で、users/edit.html.erb及びデベロッパーツールを表示させ画面をリロードさせると、「Debugger paused」と表示され画面遷移が続く状態になりました。

`debugger`を関数の中に入れていた事で、本来読み込まれていたjsファイルを「読み込めてない」と思ってしまったのが良くなかったですね…。

と言う事は、jsファイルは読み込めているにも関わらずクリックイベントが動作していないと言う事ですね…？記述やスペルに誤りはないと思うのですが…。

[neko_daisuki]

ページ内に存在する idがlogin-showの要素はひとつだけですか？

[punchan36]

はい。念のため検索して確かめましたが、以下の記述にありますidのみです。
<div id="login-show" class="login">ログイン</div>

[neko_daisuki]

application.js から turbolinks を外しても同じ結果になりますか？
$('#login-show').click()の代わりに $('#login-show').remove() とするとログインボタンは消えますか？

[punchan36]

//= require turbolinks を消してみても同じ結果でした…。
また以下の記述に変えても「ログイン」の文字は表示されたままでした。
$(function() {
$('#login-show').remove();
});

以下の様に、他のjsファイル（チャット機能において、スクロールバーを常に下部に固定させる）は機能しています。
------------------------------------------------------------------
document.addEventListener("turbolinks:load", () => {
function scrollToEnd() {
const messageDetails = document.getElementById('scroll-inner');
messageDetails.scrollTop = messageDetails.scrollHeight;
}
scrollToEnd()
})
------------------------------------------------------------------
$(function() {　から始まる記述が何らかの理由で読み込まれない、などと言う事があるのでしょうか…？ビュー、jsファイル共に全角スペースも特に入っていないようです。

[punchan36]

今色々試してみまして、以下の様に記述する事でfadeInが動いてくれました！
ただturbolinksについての理解がまだ浅く、モヤっとしています…。ただ意味も分かっていない呪文を書いてたまたま成功したようで…。

いずれにせよturbolinksがjsファイルの発火を妨げており、それをoffにした、と言ったニュアンスで合っておりますでしょうか？自分でも勉強してみます！

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

[siruku6]

turbolinksは慣れるまでうまく使うのが難しいとされていますね。。。
（私はついオフにしてしまいます...）

上手くいった方法があれば、ぜひ回答欄に書いて自己解決にしましょう！

[punchan36]

お二方、ご助言頂き有難うございました！無事解決に結びつきました。
ベストアンサーに出来ず申し訳ありません。

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を無効化させる必要がある。