Rails 6 + Turbolinks 不加载第 3 方库

如何解决Rails 6 + Turbolinks 不加载第 3 方库

我使用 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)
    ...

我该如何解决？

解决方法

将 $(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