Ruby on rails Ruby on Rails-为什么Materialize.updateTextFields不是一个函数？

我有一个RubyonRails项目，它使用了

材质saas

gem。我最近注意到文本字段动画已经停止工作。更具体地说，当文本字段处于活动状态时，标签不会在页面上向上移动，用户在输入字段中键入的任何内容都会写在标签文本上，看起来很糟糕。是我遇到的风格问题的一个例子。除了标签文本移动不正确外，表单还有一个文件字段不工作。当用户选择要上载的文件时，文件名不会出现在表单中，这是预期的行为

我最近运行了

rakeassets:clobber

和

rakeassets:precompile

，我想知道这是否与这个问题有关

我做了一些研究，他们在材料CSS文档中说：

您还可以调用函数

Materialize.updateTextFields（）到
如果需要，请重新初始化页面上的所有物化标签
动态添加输入

我尝试了此修复，但在加载页面时，控制台中没有函数

未捕获TypeError:Materialize.updateTextFields

以下是我的表单视图：

<%= render 'shared/header' %>
<div class="container">
<h3>New Photo of the Day</h3>
<div class="row">
<%= form_for @photo, multiple: true do |f| %>

  <div class="input-field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <div class="input-field">
    <%= f.label :caption %>
    <%= f.text_area :caption, class: "materialize-textarea" %>
  </div>

  <%= f.label :date %>
  <%= f.date_field :date, class: "datepicker"%>

  <div class="file-field input-field">
    <div class="btn waves-effect waves-light yellow accent-4 white-text">
      <span>File</span>
      <%= f.file_field :image %>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text">
    </div>
  </div>

  <div class="input-field center-align">
    <%= f.submit "Upload", class: "btn-large waves-effect waves-light"  %>
  </div>

<% end %>

这是我的资产/custom.js

$(document).ready(function() {
  Materialize.updateTextFields();
});

这真的很奇怪，因为我知道表单样式的动画正在工作。我没有更改表单的代码。我能想到的唯一一件事就是clobber/precompile命令，我需要运行该命令才能在生产环境中改进ui

---

谢谢你花时间看这张照片，我感谢你的帮助

您正在使用jQuery 1.x

尝试使用jquery2.x或3.x

资料来源：

---

E：在您的设置中执行此操作的方法是将行

/=require jquery

更改为

/=require jquery2

在我看来似乎有一些问题：

Rails很神奇，它做了一些叫做“TurboLink”的事情。基本上，页面是动态替换的，而不是实际更改页面。它使您的站点更快，但并不总是发出相同的Javascript事件

您还需要jQuery2（我在收到Dmitry的建议后更新了我的答案）

将应用程序JS的前几行更改为：

//= require jquery2
//= require turbolinks
//= require materialize-sprockets

其次，我发现了materialize库中存在的第二个bug。基本上，在turbolinks加载页面之前，它不会定义

updateTextFields（）

。为了解决这个问题，我已经完成了，但在此期间，我将通过将方法从复制/粘贴到您的代码中（在

$（document.ready

）来修补这个问题。使用类似这样的方法，让您的代码在修复错误后得到更新（相当于一个多边形填充）

---

糟糕的建议。使用jquery turbolinks gem触发带有turbolinks的jquery事件。这里的问题是使用jQuery 1，它完全破坏了Materialize的一部分。改变是将

/=require jQuery

替换为

/=require jquery2

@DmitryKudriavtsev。这是一个糟糕的解决方案，但这是我唯一能想到的解决方案。虽然我希望这不是什么好建议，但库本身会侦听

turbolinks:load

事件，而不是

ready

事件，这意味着它只在导航后定义

Materialize.updateextfeilds

。遗憾的是，只有三种方法可以解决这个问题：1是更改代码本身，以侦听两个事件（这需要一个PR，我已发送）。2是自己触发

turbolinks:load

事件，但这可能会破坏其他库，3是自己定义方法（我建议的）。同样，jquery turbolinks gem使其“正常工作”。@DmitryKudriavtsev查看自述文件，如果使用

$.ready（）

，它将“正常工作”，但是

物化sass

gem本身使用turbo-link-on-load事件。该事件仅在页面更改后触发，而不是在初始加载时触发。这是非常有用的文档。谢谢你找到它。

//= require jquery2
//= require turbolinks
//= require materialize-sprockets

Materialize.updateTextFields = Materialize.updateTextFields || // code from forms.js