为什么 jQuery $(document).ready() 在验证失败后没有在 Rails 渲染视图中触发？答案

【问题标题】：Why jQuery $(document).ready() not firing inside Rails render view after failed validation(s)?为什么 jQuery $(document).ready() 在验证失败后没有在 Rails 渲染视图中触发？
【发布时间】：2016-01-14 07:22:33
【问题描述】：

我有一个 Rails 应用程序，我运行 rails g scaffold friends name。在我的朋友模型中，我输入了这个：

class Friend < ActiveRecord::Base
    validates_presence_of :name
end

这是我在 FriendsController 中的 new 和 create 操作：

  def new
    @friend = Friend.new
  end

...

  def create
    @friend = Friend.new(friend_params)

    respond_to do |format|
      if @friend.save
        format.html { redirect_to @friend, notice: 'Friend was successfully created.' }
        format.json { render :show, status: :created, location: @friend }
      else
        format.html { render :new }
        format.json { render json: @friend.errors, status: :unprocessable_entity }
      end
    end
  end

这是我给朋友的表格部分：

<%= form_for(@friend) do |f| %>
  <% if @friend.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@friend.errors.count, "error") %> prohibited this friend from being saved:</h2>

      <ul>
      <% @friend.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

<script type="text/javascript">
  $(function(){
    console.log("Hello world!");
  });
</script>

如您所见，我的表单底部有 jQuery $(document).ready()，当我加载表单时会记录 Hello world!。

当我提交不带名称的表单时，它会再次呈现新模板，但不会调用该 jQuery $(document).ready()。

演示：

当验证失败时，如何在 render new partial 内再次触发 jQuery $(document).ready()？

为什么会这样？

【问题讨论】：

你在用turbolinks这个概念吗？

标签： javascript jquery ruby-on-rails ruby-on-rails-4 document-ready

【解决方案1】：

在Rails4 turbolinks 概念将默认出现。所以$(document).ready() 将无法正常加载，所以您可以按照以下选项进行操作，

var ready;
     ready = function() {

        console.log("Hello world!");

        };

        $(document).ready(ready);
        $(document).on('page:load', ready);

或者

$(document).on('ready page:load', function () {
     console.log("Hello world!");
});

或者

您可以使用jquery.turbolinks gem 来避免这个问题

或者

您可以使用其他turbolinksevents来解决问题。

希望它能解决你的问题。

【讨论】：