Rails 5 上的 Turbolinks 和 jQuery 兼容性

Question

我有一个隐藏字段，当使用 jQuery 单击链接时会激活该隐藏字段。单击链接时，该字段仅显示一秒钟，然后消失。

  $('.use-different-card').on "click", ->
    $(".card-on-file").hide()
    $(".card-fields").removeClass("hidden")

当我删除 turbolinks 时，jQuery 似乎工作得很好。

我尝试添加compatibility.coffee，但没有运气。

这是我的源代码树。

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require compatibility
//= require_tree .

有什么关于下一步尝试的建议吗？

Answer 1

您遇到的问题是您的 jquery 没有在“更改”页面上重新加载。不要将函数包装在 document.ready() 中，而是使用以下内容：

$( document ).on('turbolinks:load', function() {
  $('.use-different-card').on "click", ->
  $(".card-on-file").hide()
  $(".card-fields").removeClass("hidden")
})

更新：另外，在 Jquery.ujs 之后需要您的 jquery.turbolinks！更改您的需求顺序。根据 jquery.turbolinks 的 gem 文档，您需要 application.css 文件如下：

//= require jquery
//= require jquery.turbolinks  /*Notice this must be before jquery_ujs */
//= require jquery_ujs

更正此订单后，您可能不再需要使用turbolinks:load 调用。