Rails 6 + Turbolinks 不加载第 3 方库答案

【问题标题】：Rails 6 + Turbolinks doesn't load a 3rd party libraryRails 6 + Turbolinks 不加载第 3 方库
【发布时间】：2021-05-13 12:10:22
【问题描述】：

我正在使用 jQuery 库来屏蔽输入中的电话号码：

%script{src: "https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js", 'data-turbolinks-track': 'reload'}

这在标签中。

然后，在我看来，代码如下所示：

<form...
  <input id="phone_number" ... />
  ...

在所有的 HTML 之后，我有以下内容： :javascript $(document).on('page:load', function() { console.log("Hello World!"); $("#phone_number").inputmask({"mask": "(999) 999999"}); });

当我运行这段代码时，什么都没有发生，甚至没有打印出Hello World!。

如果我把 JS 部分改成这样：

$(document).ready(function($){
  console.log("Hello World!");
  $("#phone_number").inputmask({"mask": "(999) 999999"});
});

然后Hello World! 被打印出来并且输入屏蔽插件正在工作 - 太棒了！

但是，如果我单击应用程序中的某个链接，然后再次单击返回到具有 JS 屏蔽功能的页面，它会中断并返回以下错误消息：

Uncaught TypeError: $(...).inputmask is not a function
    at HTMLDocument.<anonymous> (<anonymous>:13:32)
    ...

我该如何解决这个问题？

【问题讨论】：

您是如何加载 inputmask 插件的 - 它是否会出现在您的文档正文中？
inputmask 插件是从<HEAD> 标签加载的；我也尝试从<BODY>标签加载if，特别是我将它放在关闭</BODY>标签之前，但它也不起作用。
它应该在头部。 $("#phone_number") 在错误之前是否存在？
@Joel_Blum 该字段在 Rails 视图中呈现 - 它就在那里..

标签： ruby-on-rails ruby ruby-on-rails-6 turbolinks

【解决方案1】：

将$(document).ready(function($) 更改为$(document).on('turbolinks:load', function($)，即：

$(document).on('turbolinks:load', function($){
  console.log("Hello World!");
  $("#phone_number").inputmask({"mask": "(999) 999999"});
});

使用 Turbolinks 时，您需要监听每次页面访问时触发的 Turbolinks 事件，而不是监听 ready 事件。

参考：https://guides.rubyonrails.org/working_with_javascript_in_rails.html#page-change-events 和 https://github.com/turbolinks/turbolinks/#observing-navigation-events

【讨论】：

嗨@PedroSchmitt，谢谢你的回答。如果我使用$(document).on('turbolinks:load', function($){，那么它里面的代码永远不会被执行——console.log("Hello World!");永远不会被打印出来。
我认为 '$' 放错了位置...您可以只尝试 function() 而不是 function($) 吗？
实际上，我刚刚在我的 Rails 应用程序上进行了测试，它使用$(document).on('turbolinks:load', function() 和$(document).on('turbolinks:load', function($) 打印了“hello world”。 Turbolinks 是否处于活动状态？