railsでjsが効かない

Question

railsでjsが効かないときがあります。

<% if !flash[:notice].blank? %>
    <div class="flash_notice" id="flash_notice">
        <p class="flash_notice_message"><%= flash[:notice] %></p>
    </div>
<% end %>
<% if !flash[:warning].blank? %>
    <div class="flash_warning" id="flash_warning">
        <p class="flash_warning_message"><%= flash[:warning] %></p>
    </div>
<% end %>

$(function () {
  $('#flash_notice').on('click', function (e) {
    $('#flash_notice').remove();
  });
  $('#flash_warning').on('click', function (e) {
    $('#flash_warning').remove();
  });
});

上記のように、通知メッセージ・警告メッセージを表示させて、そのメッセージをクリックするとメッセージが消えるようにしています。
しかし、通知メッセージは消えるのですが、警告メッセージがクリックしても消えません。
今まで動いていた処理で、違う環境を作ったら急に動かなくなりました。
特定のページでのみ発生してしまう現象です。
とても単純な処理なのにまったく意味が分からないです。
どなたか知恵をお貸しください。

追記--------------------------

$('#flash_warning').on('click',function(e){
    alert('クリック');
    $('#flash_warning').remove();
});

こうすると、アラートが表示されないので、「flash_warning」がクリックされていないことになっていますが、

$(document).on('click',function(e){
    alert(e.target.id);
});

という記述を追加すると、「flash_warning」が表示されます。

一体なんなのでしょうか。意味が分からないです。

Answer 1

Turbolinksが有効になっていませんか？

Turbolinksは、ページ遷移を乗っ取って高速化するため、$(function(){...})は最初のページロード時にしか実行されなくなります。

使いこなせないのであれば、Turbolinksを停止させてしまったほうがいいでしょう。

Comments

[soft_admin]

スペルミスで無効化できていませんでした。ありがとうございました。

[no1knows]

ちなみにTurbolinksの場合は、jQueryのコードを下記で囲うだけで大丈夫なはずです。

$(document).on('turbolinks:load', function() {
})

個人的にはRailsでフロントまで作っているようであれば、無効化するのはデメリットしかない気がします。

[soft_admin]

turbolinksはどういう風に使用するのでしょうか？jsが効かなくなるのであれば、無効化するしかないのですが...

[no1knows]

上記コメントで書いたように、以下のようにすれば大丈夫なはずです。

$(document).on('turbolinks:load', function() {
$('#flash_warning').on('click',function(e){
alert('クリック');
$('#flash_warning').remove();
});
});

turbolinksを利用するとPjaxを実装できます。
これはユーザービリティの要となるページ表示速度に大きく影響します。
もちろんVueやReactのようなSPAほど速くないけれど、簡単に実装できて開発工数を大幅に削減できるのがポイントです。

Turbolinksをオフしないためにやったこと
https://gist.github.com/saboyutaka/8727377

Turbolinksで静的サイトを擬似SPA化
https://mae.chab.in/archives/59936
※こちらはワードプレスにturbolinksを実装したサイトです。
ヘッダーのallや所感、出来事などのリンクをクリックしていただくとページ遷移の速度がすごい早いのが実感できるかと思います。

[soft_admin]

ありがとうございます。もっと勉強します。

[soft_admin]

上記のやり方をすると、アプリ外のリンクから遷移したときにjsが効かないときがあるのですが、そういったものの対処法はご存じでしょうか？

[no1knows]

下記を確認いただければと思います。
https://gist.github.com/saboyutaka/8727377#turbolinks%E3%81%A8%E4%BB%B2%E8%89%AF%E3%81%8F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E6%B3%A8%E6%84%8F%E3%81%99%E3%82%8B%E3%81%93%E3%81%A81