Bagaimana untuk Menggunakan $(document).ready() dengan Pautan Turbo dalam Rails 4 dan 5?

Menggunakan $(document).ready() dengan Turbo-Links dalam Rails 4

Dalam Rails 4, adalah perkara biasa untuk menyusun fail JavaScript ke dalam entiti yang berasingan dan menyusunnya menggunakan saluran paip aset. Walau bagaimanapun, menggunakan acara "sedia" jQuery mungkin menimbulkan cabaran apabila pautan turbo didayakan. Oleh kerana pemautan turbo mengelakkan muat semula halaman penuh, klik halaman berikutnya menghalang pelaksanaan kod dalam fungsi "sedia".

Penyelesaian:

Untuk memastikan jQuery berfungsi dengan betul acara dengan pautan turbo, gunakan yang berikut pendekatan:

CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

Di sini, baris tambahan mendengar acara 'page:load', yang dicetuskan oleh pautan turbo.

JavaScript:

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Alternatif untuk Rel 5 (Pautan Turbo 5):

Rel 5 memperkenalkan acara baharu 'turbolinks:load' yang dicetuskan pada halaman awal dan seterusnya bebanan. Ini membolehkan kami memudahkan penyelesaian:

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

  ...your javascript goes here...

});

Pendekatan ini memastikan peristiwa jQuery berlaku seperti yang dijangkakan apabila pautan turbo aktif, membolehkan kelancaran fungsi JavaScript pada aplikasi Rails 4 anda.

Atas ialah kandungan terperinci Bagaimana untuk Menggunakan $(document).ready() dengan Pautan Turbo dalam Rails 4 dan 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!