时间戳

首页 > 解决方案 > Rails 6 + Turbolinks 不加载第 3 方库

ruby-on-rails - 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 ({"掩码": "(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)
    ...

我该如何解决？

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

解决方案

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

推荐阅读