web-dev-qa-db-ja.com

Rails 5：ターボリンクで$（document）.ready（）を使用する方法

here および here で説明したように、Turbolinksは、初期ロード以外のすべてのページアクセスで通常の$(document).ready()イベントが発生するのを防ぎます。ただし、リンクされた回答のソリューションはRails 5では機能しません。以前のバージョンのように、各ページ訪問でコードを実行するにはどうすればよいですか？

javascriptjqueryruby-on-railsturbolinksruby-on-rails-5
75
AndrewH

readyイベントをリッスンするのではなく、ページにアクセスするたびにTurbolinksによって起動されるイベントにフックする必要があります。

残念ながら、Turbolinks 5（Rails 5に表示されるバージョン）は書き直されており、Turbolinksの以前のバージョンと同じイベント名を使用していないため、上記の回答が失敗します。現在機能しているのは、次のような turbolinks：load イベントをリッスンすることです。

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})
146
AndrewH

ネイティブJS：

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});
38
user464622

これが私の解決策です。jQuery.fn.readyをオーバーライドすると、$(document).readyは変更なしで機能します。

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn
7
Xiaohui Zhang

Rails 5で最も簡単な解決策は以下を使用することです：

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

$(document).readyの代わり。魔法のように機能します。

7
Milad.Nozari

here から、私のために働く解決策があります：

  1. インストールgem 'jquery-turbolinks'

  2. この.coffeeファイルをアプリに追加します。 https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

  3. turbolinks-compatibility.coffeeという名前を付けます

  4. application.jsで

    //= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require turbolinks-compatibility
2
ChaosPredictor

この本当にすばらしいgemの修正を待っている間、私は次を修正することで前進することができました。

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

に：

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbolinks:load', -> callback($)

これで何が解決しないのかはまだわかりませんが、最初の検査ではうまくいくようです。

0
Jason Ihaia

（coffeescriptの場合）

私は使用します：$(document).on 'turbolinks:load', ->

代わりに：$(document).on('turbolinks:load', function() {...})

0
fcabanasm