为啥 jQuery 在我的 rails 5 应用程序中不起作用？

Posted 2023-05-09

【中文标题】为啥 jQuery 在我的 rails 5 应用程序中不起作用？

【英文标题】：Why is jQuery not working in my rails 5 app?为什么 jQuery 在我的 rails 5 应用程序中不起作用？

【发布时间】：2017-11-24 22:54:59

【问题描述】：

我正在尝试在我的新 Rails5 应用程序中编写我的第一个 js 代码，但似乎无法让 Jquery 工作，猜测这是配置/环境问题，但尽管我进行了所有搜索和确认更改，但我似乎无法让它运行。谁能看出我做错了什么？：

宝石文件；

 # Use jquery as the javascript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

application.html.erb;

<title>MyEngine</title>
<!-- Gon::Base.render_data -->
<%= Gon::Base.render_data %>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

new.html.erb;

<%= link_to 'Remove Employee', '#', id: 'hide-employee' %>

quotes.coffee;

$(document).on "page:change", ->
    $('#hide-employee').click ->
        alert "Clicked!"

点击时没有警报。没有错误，服务器运行和页面渲染正常，只是控制台什么都没有。

感谢您的帮助。

【问题讨论】：

如果有人遇到此问题并且您已经完成了添加 turbolinks:load 的建议更改，但问题仍然存在，请检查您是否有类似的 .coffee 文件。使用 .coffee 文件或删除它并使用 .js 文件

【参考方案1】：

尝试使用 turbolinks:load 代替。

$(document).on 'turbolinks:load', ->
  $('#hide-employee').click ->
    alert 'Clicked!'

【讨论】：

感谢@hashrocket，在更改后直接工作。

【参考方案2】：

对于那些因为拥有 Rails 5.1 而来到这里的人，jQuery 不再是默认依赖项。来自release notes：

在早期版本的 Rails 中默认需要 jQuery 来提供数据远程、数据确认和 Rails 的 Unobtrusive JavaScript 产品的其他部分等功能。不再需要它，因为 UJS 已被重写为使用普通的原生 JavaScript。此代码现在作为 rails-ujs 包含在 Action View 中。

如果需要，您仍然可以使用 jQuery，但默认情况下不再需要它。

要将其重新添加，请添加到Gemfile：

gem 'jquery-rails'             # Use jquery as the JavaScript library

然后

$ bundle

【参考方案3】：

page:change 事件在turbolinks-classic 中定义。此版本现已弃用，您可以自己查看。

相反，您可以使用turbolinks:load or turbolinks:render or turbolinks:before-render。

【讨论】：

感谢您的信息??赞赏。

【参考方案4】：

确保您是 app/assets/javascripts/application.js 包含：

//= require jquery
//= require jquery-ujs

注意：如果您使用的是 Rails 5.1，则可以省略 //= require jquery_ujs 以支持 //= require rails-ujs。

另外，请考虑彻底删除 turbolink。这样做解决的资产管道问题比我想象的要多。我有一种感觉，无论如何它并没有为您提供太多价值。 :-)

删除涡轮链接：

从 Gemfile 和 $ bundle 中删除 turbolinks。 从 app/assets/javascripts/application.js 中删除 //= require turbolinks 从 app/views/layouts/application.html.erb 中删除两个 "data-turbolinks-track" => true 哈希。

【讨论】：

感谢工具包。现在我已经按照您的建议并按照指示从应用程序中删除了 turbolinks，但是 jQuery 不会再次工作？有什么想法吗？$(#hide-employee).click(function() alert("link was clicked."); ); 什么都不做。