如何使用 Rails 4 和 Turbo-Links 可靠地觸發 jQuery 事件？

使用Turbo-Links 在Rails 4 中利用jQuery 事件

Rails 4 開發人員在使用Turbo-Links 時經常遇到組織JavaScripts文件的困境。通常，jQuery 的「ready」事件用於在頁面載入時觸發 JavaScript 執行。但是，啟用 Turbo-Links 後，此事件無法在後續頁面轉換時觸發。

要解決此問題，了解 Turbo-Links 的運作方式至關重要。與傳統的頁面重新加載不同，Turbo-Links 允許無縫頁面轉換，而無需完全加載新頁面。因此，與 DOM 初始載入程序綁定的 jQuery 的「ready」事件在第一頁載入後不再觸發。

幸運的是，Turbo-Links 提供了解決方案。每當轉換到新頁面時，它都會廣播“page:load”事件。此事件可用於模仿 jQuery 的「就緒」事件的行為，並確保 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 開發人員可以確保jQuery 事件即使在啟用Turbo-Links 的情況下也能可靠地運行，從而實現無縫且反應迅速的使用者經驗。

以上是如何使用 Rails 4 和 Turbo-Links 可靠地觸發 jQuery 事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！