Rails 4 と Turbo-Links で jQuery の「ready」イベントの失敗を修正する方法は?

Turbo-Links を使用した Rails 4 での DOM イベント処理

初期ページ読み込み後に jQuery の 'Ready' イベントが発生しない?

Rails 4 アプリケーションの場合アセット パイプラインを実装すると、JS 組織を管理する必要が生じます。ユーザーは、Turbo-Links が原因で、その後のリンクのクリックで jQuery の Ready イベントがトリガーされないという問題に遭遇する可能性があります。

Turbo-Links の影響について理解する

Turbo-Links は、ページ遷移を完全に実行せずにナビゲーションを強化します。リロードします。この最適化により、後続のリンクのクリックではページのコンテンツのみが更新されるため、最初のページの読み込み後に Ready イベントが発生することがなくなります。

問題の解決

jQuery イベントが Turbo-Links とシームレスに機能するようにするには、次のアプローチをお勧めします:

CoffeeScript バージョン

ready = ->
  # Place your CoffeeScript code here
$(document).ready(ready)
$(document).on('page:load', ready)

「page:load」イベントは Turbo-Links によってトリガーされ、ready イベントの信頼できる代替手段を提供します。

JavaScript バージョン

var ready;
ready = function() {
  # Insert your JavaScript code here
};
$(document).ready(ready);
$(document).on('page:load', ready);

Rails 5 Update

Rails の場合図 5 に示すように、Turbo-Links 5 には、最初とその後のページ読み込み時に発生する Turbolinks:load イベントが含まれています。これにより、ソリューションが簡素化されます。

$(document).on('turbolinks:load', function() {
  # Add your JavaScript code here
});

このアプローチを実装すると、Turbo-Links を利用する Rails 4 アプリケーション内で jQuery イベントが期待どおりに実行されます。

以上がRails 4 と Turbo-Links で jQuery の「ready」イベントの失敗を修正する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。