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

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

Rails 4 开发人员在使用 Turbo-Links 时经常遇到组织 JavaScript 文件的困境。通常，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中文网其他相关文章！