如何使 jQuery 的 `$(document).ready()` 與 Rails 4 的 Turbo Links 一起工作？

Rails 4：利用jQuery 的「$(document).ready()」與Turbo-Links 整合

在Rails 4 上工作時在應用程式中，開發人員經常需要有效地組織JavaScript 檔案。傳統上，JavaScript 程式碼分散在各種視圖中。然而，更有組織的方法是將它們編譯成單獨的檔案並利用資源管道。

但是，當啟用 Turbo-Links 時，jQuery「就緒」事件會遇到限制。在隨後的單擊過程中，「ready」事件停止觸發，從而影響其範圍內程式碼的執行。出現此問題的原因是啟用 Turbo-Links 後頁面不會重新載入。

要解決此問題，必須確保 jQuery 事件在 Turbo-Links 保持活動狀態時完美運作。可以考慮兩種方法：

方法1：使用Rails 特定偵聽器進行事件包裝

此方法涉及將JavaScript 腳本包裝在Rails 特定偵聽器中，有效確保其頁面加載時執行。

方法 2：利用 Turbo-Links事件

Turbo-Links 提供了一個特定的事件“page:load”，可用來觸發必要的 JavaScript 程式碼。透過利用此事件，開發人員可以繞過後續點擊引起的問題。

對於 CoffeeScript 用戶，以下程式碼片段提供了解決方案：

ready = ->

  ...your coffeescript goes here...

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

此片段的最後一行偵聽Turbo-Links 觸發的「page:load」事件。

對於JavaScript 用戶，可以使用以下等效程式碼使用：

var ready;
ready = function() {

  ...your javascript goes here...

};

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

在Rails 5 中，使用更新的Turbolinks 5，「page:load」事件已替換為「turbolinks: load”，即使在初始頁面載入時也會觸發該事件。這將程式碼簡化為以下內容：

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

  ...your javascript goes here...

});

透過實作這些解決方案，開發人員可以有效確保 jQuery 事件在存在 Turbo-Links 的情況下繼續正確運作。

以上是如何使 jQuery 的 `$(document).ready()` 與 Rails 4 的 Turbo Links 一起工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！