如何在 Rails 4 和 5 中将 $(document).ready() 与 Turbo Links 一起使用？

在 Rails 4 中使用 $(document).ready() 和 Turbo-Links

在 Rails 4 中，通常将 JavaScript 文件组织成单独的实体并编译它们使用资产管道。然而，当启用 Turbo-links 时，使用 jQuery 的“ready”事件可能会带来挑战。由于涡轮链接避免了整页重新加载，因此后续页面单击会阻止“就绪”函数中代码的执行。

解决方案：

确保 jQuery 的正常运行具有 Turbo Link 的事件，请利用以下内容method:

CoffeeScript:

ready = ->

  ...your coffeescript goes here...

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

这里，附加行监听 'page:load' 事件，由Turbo-links。

JavaScript：

var ready;
ready = function() {

  ...your javascript goes here...

};

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

Rails 5 的替代方案（Turbolinks 5）：

Rails 5引入了一个新事件“turbolinks:load”，该事件在初始页面和后续页面上触发负载。这使我们能够简化解决方案：

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

  ...your javascript goes here...

});

这种方法可确保当 Turbo 链接处于活动状态时 jQuery 事件按预期触发，从而允许在 Rails 4 应用程序上顺利运行 JavaScript 功能。

以上是如何在 Rails 4 和 5 中将 $(document).ready() 与 Turbo Links 一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！