如何使 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中文网其他相关文章！