タブ機能が突然動かなかくなった。

Question

前提・実現したいこと

最近レスポンシブデザイン (css) を整えていたのですが、以前実装し終えたタブ機能が知らない内に機能しなくなっている事に気付きました。

3つのタブがあり、1つ目のタブとそのコンテンツがデフォルトで選択・表示されているのですが、2つ目以降のタブを押してもタブ・コンテンツ共に切り替わらず表示されない状態です。

該当のjsファイルは特別触っておりませんでしたので原因が分かりませんでした。エラーは特に発生しておりません。

該当のソースコード

users/show.html.erb

<div class="tab-container">
  <ul class="tab-group">
  	<li class="tab is-active">A</li>
  	<li class="tab">B</li>
    <% if @current_user.id == @user.id %> 
   	<li class="tab">C</li>
    <% end %>
  </ul>

  <div class="panel-group">
    <div class="panel is-show">
      <!-- 中身省略。 -->
    </div>
    <div class="panel">
      <!-- 中身省略。 -->
    </div>
    <div class="panel">
      <!-- 中身省略。 -->
    </div>
  </div>
</div>

tab.js

$(document).on('turbolinks:load', function() {
	jQuery(function($){
		$('.tab').click(function(){
			$('.is-active').removeClass('is-active');
			$(this).addClass('is-active');
			$('.is-show').removeClass('is-show');
	        // クリックしたタブからインデックス番号を取得
			const index = $(this).index();
	        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
			$('.panel').eq(index).addClass('is-show');
		});
	});
});

試したこと

1 . 該当のjsファイルに以下のコードを記述し改めて該当ページをリロードしますとアラートで「OK!」と表示されましたので、ファイル自体は読み込めているようです。

$(function() {
  alert('OK!');
});

2 . Chromeのデベロッパーツールにて、該当のjsファイル内にブレークポイントを設定した上でタブの遷移を試みましたが、"Paused on breakpoint"の様に処理が止まる事がありませんでした。

3 . 他に使用しておりますjsファイルは処理が走っているようで、"Paused on breakpoint"の表示と共に処理が止まりました。
因みにそちらは「メッセージ機能において、最新のメッセージほど下に表示される為、ページ遷移した段階でスクロールバーを一番下に表示する」と言った内容です。

$(document).on('turbolinks:load', function() {
    function scrollToEnd() {
        const messageDetails = document.getElementById('scroll-inner');
        messageDetails.scrollTop = messageDetails.scrollHeight;
    }
    scrollToEnd()
});

4 . application.html.erbにおいてjQueryのバージョンを変えてから試してみましたがダメでした。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

5 . 上記users/show.html.erb内に記載がありますis-showクラスをインデックス番号1番ではなく2番目に置いてみると、2ページ目のコンテンツが表示されました。ですのでコンテンツの中身に問題がある訳ではないのかなと思いました。
しかし他のタブをクリックする事による遷移は相変わらず出来ません。

こうして試してみますと該当のjsファイル内が怪しいのかなと思いましたが、記述ミスを見つける事が出来ませんでした。

どなたかご助言を頂けますと有難いです。

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

ruby 2.6.4p104
RubyGems 3.0.3
Rails 5.2.3
jquery 1.12.4

追記

tab.js1行目の$(document).on('turbolinks:load', function() {を消したり$(document).on('ready page:load', function() {に変えて試してみると、毎回ページをリロードすればタブが機能する様になりました。

turbolinksが絡んでいるのかなと思いますが、まだ解決には至りません。ページのリロードなしでも（他のページから遷移してきた状態でも）タブが動くよう改善したいです。

Comments

[退会済みユーザー]

CSSは弄ってないでしょうか？見えない要素が上にかぶさっていると、その見えない要素をクリックしてしまうのでその下の要素はクリックイベントが発生しません。

あとこの質問rails関係ないのでrailsのタグはつけない方がいいです。

[punchan36]

有難うございます！レスポンシブ関連で弄ったcss周りを確認してみます。
少し時間がかかりそうですので、取り急ぎタグに関して編集させて頂きました。

[punchan36]

原因がまだ分かりません。cssファイルを一つずつコメントアウトして試してみたのですが、状況が変わりません。
jsファイルで明確に"this"と要素を指定しても、cssによって被さってしまう(?)ような事があるのでしょうか…？

Answer 1

動かなかった tab.js に問題はなく、「試したこと」の3番に記載のありますjsファイルに問題がありました。

scroll.js

$(document).on('turbolinks:load', function() {
    function scrollToEnd() {
        const messageDetails = document.getElementById('scroll-inner');
        messageDetails.scrollTop = messageDetails.scrollHeight;
    }
    scrollToEnd()
});

jsファイルは名前が a, b, c, ...の順に並んでおり上から順に処理がされておりますが、動かなかった tab.js のファイル名を試しに a-tab.js に変えた所上手く動いたのをきっかけに原因が発覚しました。結局 scroll.js 内に問題があった為、その後に読み込まれた tab.js ファイルが機能しなかった、と言う事だったのです。

具体的には scroll.js にて getElementById('scroll-inner') とありますが、これは他の特定のビューのみで扱っている id でしたので、その後に tab.js が読み込まれても、このタブ機能を使いたいビュー上に 'scroll-inner' なる id を持つ要素は存在しない為、tab.js の中身は機能してくれない、と言う流れになっておりました。

scroll.js 自体は機能していた為に、まさかここに問題があるとは想像できず解決に時間がかかってしまいました。

解決方法と致しましては scroll.js 内でif文を用い、「ID(#scroll-inner)と言う要素の数が存在するかどうかを判別。無い場合は以下の処理は行わない。」と言う方法を用いました。

scroll.js

$(document).on('turbolinks:load', function() {
    function scrollToEnd() {
        if($('#scroll-inner').length){
            const messageDetails = document.getElementById('scroll-inner');
            messageDetails.scrollTop = messageDetails.scrollHeight;
        }
    }
    scrollToEnd()
});

これにより、 scroll.js よりも下に tab.js ファイルを置いた場合でも全て機能する様になりました。
ファイル別に単体で見てみれば特に問題もなかったのですが、今回はTurbolinksを使用している為、逐一jsファイルが読み込まれている訳ではなく一度に上から順に読み込まれている、と言う点も考慮してコードを書かなくてはいけませんでした。

Answer 2

jQuery(function($){～});で囲んでいるのが原因ではないでしょうか。

これは DOMの読み込みが完了した時に実行されるので、
Turbolinks を使用している場合、期待通りに中身が実行されないのだろうと思います。

参考ページ
【Rails】turbolinksやAjaxの影響でjQueryが正常に動作しないとき - Qiita

（※Turbolinks は使ったことがないので見当違いかもしれません）

Comments

[punchan36]

有難うございます！
jQuery(function($){ の部分を以下のように変えてみましたが、それでもダメでした。
jQuery(document).on('turbolinks:load', function($){

また今回のタブ機能と同様に以下の記述から始まるjsファイルは他にもあるのですが、そちらは上手く機能しているのですよね…。
$(document).on('turbolinks:load', function() {
jQuery(function($){

因みにそちらはモーダルをフェードイン・フェードアウトさせる内容になっております。
出だしが同じ記述でも、なぜかタブだけ機能していない状況です…。

[satokei]

「jQuery(function($){～});」で囲むのをやめて、以下のようにしてみるという意図でした。
---------
$(document).on('turbolinks:load', function() {
　$('.tab').click(function(){
　　～コード～
　});
});
---------（全角スペースあり）

ただ、CSSファイルだけを変更しただけで動作しなくなったのであれば、見当違いの回答だったかもしれません。
動作しなくなった前に変更したのはCSSだけなのか、もう一度確認してみてはいかがでしょうか？

[punchan36]

失礼致しました。
そちらのコードで（当然スペースも半角にして）試してみましたが、やはり上手くいきません。
変更点を振り返って他の項目も試し、進捗が有り次第追記させて頂きます！