Rails 4 および 5 のターボリンクで $(document).ready() を使用する方法は?

Rails 4 の Turbo-Links で $(document).ready() を利用する

Rails 4 では、JavaScript ファイルを別個のエンティティに編成してコンパイルするのが一般的ですアセットパイプラインを使用します。ただし、ターボリンクが有効になっている場合、jQuery の「ready」イベントを使用すると問題が発生する可能性があります。ターボリンクによりページ全体のリロードが回避されるため、その後のページのクリックによって「ready」関数内のコードが実行されなくなります。

解決策:

jQuery が適切に機能することを確認するにはターボリンクを使用したイベントでは、以下を利用しますapproach:

CoffeeScript:

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)
$(document).on('page:load', ready)

ここで、追加の行は、によってトリガーされる 'page:load' イベントをリッスンします。 Turbo-links.

JavaScript:

var ready;
ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);
$(document).on('page:load', ready);

Rails 5 の代替 (Turbolinks 5):

Rails 5初期と両方で発生する新しいイベント「turbolinks:load」を導入します。後続のページが読み込まれます。これにより、ソリューションを簡素化できます。

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

  ...your javascript goes here...

});

このアプローチにより、ターボリンクがアクティブなときに jQuery イベントが期待どおりに起動され、Rails 4 アプリケーションで JavaScript 機能をスムーズに操作できるようになります。

以上がRails 4 および 5 のターボリンクで $(document).ready() を使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。