Edited at

Rails5でjqueryを動かす方法

More than 1 year has passed since last update.


概要

jqueryを使うと初回ページ読み込み&リロードで動くが、ページ遷移して該当ページに戻ってくるとjqueryが動かない。

デフォルトgemであるturbolinks(ajaxとajaxとhistoryAPIを使ってページ遷移しやすくするもの)が動作しているため、そもそも$(document).ready()が動かない


Rails4以前

Rails4以前までは、jquery-turbolinksを使っていた

gem 'jquery-turbolinks'

bundle install

application.jsのrequire jqueryと、require torbolinksの間に

//= require jquery.turbolinks

を記述。


Rails5以降はこう

目的によって使い分けができる。


素のjsの場合


app/assets/javascripts/script.js

//初回読み込み、リロード、ページ切り替えで動く。

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

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on('turbolinks:render', function() { });

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on('turbolinks:request-start', function() { });



coffeeの場合


app/assets/javascripts/script.js

//初回読み込み、リロード、ページ切り替えで動く。

$(document).on 'turbolinks:load', ->

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on 'turbolinks:render', ->

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on 'turbolinks:request-start', ->



'turbolinks:load'としておけば間違いないです。jquery-turbolinksの読み込みも必要なし!

renderやrequest-startはどんなケースで使えるのか誰か教えてくださいm(_ _)m

参考:

http://taillook.hateblo.jp/entry/2017/02/07/010750

http://qiita.com/syou007/items/fda40f65634bb2fadf36