Javascript 代码在 Ruby on Rails 中不起作用答案

【问题标题】：Javascript code not working in Ruby on RailsJavascript 代码在 Ruby on Rails 中不起作用
【发布时间】：2026-01-18 18:55:01
【问题描述】：

我试图用这个Codepen Template 做我的前端，但是当我试图点击注册按钮时，它并没有更改为代码在 index.js 文件中的注册表单，我'我在 login.html.erb 中包含了 hte index.js 文件，但是当我运行 rails 服务器时，转换不起作用。 My Rails Project, Codepen Template 这是 index.js 中的 javascript 代码

document.querySelector('.img__btn').addEventListener('click', function() {
document.querySelector('.cont').classList.toggle('s--signup');  });

【问题讨论】：

标签： javascript html css ruby-on-rails codepen

【解决方案1】：

尝试更改 index.js 的路径在 app.html 中添加此行以包含 index js 文件。

<%= javascript_include_tag "index" %>

【讨论】：

我已经在 asstes/javascripts 文件夹中添加了 index.js，这是 Ruby on Rails 的默认文件夹，但它仍然无法正常工作。
@AashishKumar 你检查了页面的视图源吗？
不，我没有，但 Sebastian 的上述回答有效，我必须在 DOMContentLoaded 中包含 js 代码，它有效，但我不知道 DOMContentLoaded，你能告诉我它是什么吗是？？

【解决方案2】：

将您当前的 JS 代码包装在 app/assets/javascripts/application.js 中的 DOMContentLoadListener 中事件侦听器：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.img__btn').addEventListener('click', function() {
    document.querySelector('.cont').classList.toggle('s--signup');
  });
});

【讨论】：

由于您有两次相同的代码，可以在application.js 或index.js 文件中完成。然后，您可以考虑删除重复的。
RoR 是自动添加 application.js 代码还是我必须使用 javascript_include_tag 手动添加？？
也感谢@Sebastion，你再次拯救了这一天，它奏效了，但你能告诉它到底是什么吗？？
application.js 文件中的 js 代码由 Rails “自动”执行，它被添加到您的应用程序 erb 文件中，这也添加了您使用 //= 设置的所有内容，其中的代码出现在编译文件的底部。关于DOMContentLoaded，您可以看到在完全加载HTML 时触发的here，因此，这可以保证您的代码段所需的所有文件都将可用@AashishKumar。