Rails 6 + Turbolinks不加载第三方库

Question

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

我该怎么解决？

Answer 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时，您不需要听就绪事件，而是需要听每个页面访问触发的Turbolink斯事件。

参考编号：https://guides.rubyonrails.org/working_with_javascript_in_rails.html#page-更改事件和https://github.com/turbolinks/turbolinks/#observing-导航事件