带有Rails 4的jQuery答案

【问题标题】：Jquery with Rails 4带有Rails 4的jQuery
【发布时间】：2014-05-29 13:26:31
【问题描述】：

我一直在构建一个 rails 4 应用程序，我需要一些简单的 jquery 函数。具体来说，我需要在 nested_form javascript 调用之后运行一些 javascript（它工作正常，但当然提供了）。我已经搜索了互联网，但我发现没有任何东西可以正常工作（就像页面加载完成后的警报窗口一样）。有人可以告诉我对于特定页面上的简单警报窗口该怎么做吗？ nested_form github 向我展示了如何完成其余的工作。谢谢。

我的代码：

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= fullTitle(yield(:title))%></title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
...

应用程序.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require jquery_nested_form


$(document).onDomReady(function()
{
    alert("works1!")
});

$(document).ready(function()
{
    alert("works2!")
});

$(document).on('page:load', ready)(function()
{
    alert("works3!")
});

$(document).on('nested:fieldAdded', function(event){
    alert("works4!");
    var field = event.field;
    $field.each('input[id=name]').val("testing!");
});

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-4 nested-forms

【解决方案1】：

随着在 Rails 4 中引入 turbolink，您必须同时绑定 $(document).ready 和 $(document).on( 'page:load')。尝试将您的代码更改为

var ready = function() {
  alert( 'works!' );
  // or any other code to execute
};

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

【讨论】：

这有效，但仅当我重新加载页面时。这是预期的功能吗？
@Megawolf ready 函数将在页面重新加载（或直接通过 url 调用）或通过 turbolinks（Rails 4 中的默认设置）加载时执行。例如。假设您有以下路线：/contacts 和 /contacts/1。如果您在浏览器中加载http://localhost:3000/contacts，由于$(document).ready，ready 函数将被触发。在该视图中，如果您有一个 link_to 'foo', '/contacts/1' 并单击它，Rails 将通过 turbolinks 加载页面（默认情况下），并且由于 $(document).on('page:load') 将触发 ready 函数

【解决方案2】：

我喜欢添加一个额外的 gem 来确保 jQuery 正常运行。 JQuery Turbolinks 修复了 turbolinks 搞砸的绑定事件。

Gemfile 应该包含以下内容

# Gemfile
gem 'jquery-rails'
gem 'jquery-turbolinks'
gem 'turbolinks'

# application.js
//= require jquery
//= require turbolinks
//= require jquery.turbolinks

【讨论】：