Rails 4 と Turbo-Links で jQuery イベントを確実にトリガーするにはどうすればよいですか?

Turbo-Links を使用して Rails 4 で jQuery イベントを利用する

Rails 4 開発者は、Turbo-Links を利用する際に JavaScript ファイルを整理するというジレンマに遭遇することがよくあります。 。通常、jQuery の「ready」イベントは、ページの読み込み時に JavaScript の実行をトリガーするために使用されます。ただし、ターボリンクが有効になっていると、後続のページ遷移でこのイベントが発生しません。

この問題に対処するには、ターボリンクがどのように動作するかを理解することが重要です。従来のページのリロードとは異なり、ターボリンクを使用すると、新しいページを完全にロードしなくても、シームレスなページ遷移が可能になります。その結果、DOM の初期読み込みプロセスにバインドされている jQuery の「ready」イベントは、最初のページ読み込み後にトリガーされなくなりました。

幸いなことに、Turbo-Links が解決策を提供します。新しいページに遷移するたびに、「page:load」イベントをブロードキャストします。このイベントを利用すると、jQuery の「ready」イベントの動作を模倣し、JavaScript コードが適切に実行されるようにすることができます。

CoffeeScript では、これは次のように実現できます。

ready = ->

  # JavaScript code

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

Vanilla JavaScript の場合、同等のコードは次のようになります。

var ready;
ready = function() {

  # JavaScript code

};

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

Rails 5 と Turbolinks 5 では、 「page:load」イベントは「turbolinks:load」に置き換えられました。この場合、JavaScript コードは次のように簡略化できます。

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

  # JavaScript code

});

これらの手法を利用することで、Rails 4 開発者は、Turbo-Links が有効になっている場合でも jQuery イベントが確実に機能することを保証し、シームレスで応答性の高いユーザーを実現できます。体験してください。

以上がRails 4 と Turbo-Links で jQuery イベントを確実にトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。