Rails Javascript onchange 适用于 <script> 但不适用于外部

Posted

技术标签:

【中文标题】Rails Javascript onchange 适用于 <script> 但不适用于外部【英文标题】:Rails Javascript onchange works with <script> but not externally 【发布时间】:2017-03-14 17:17:56 【问题描述】:

在我的index.html.erb 文件中,我有一个成功提交onChange 的表单。但是,这仅在我使用放置在表单之后的&lt;script&gt; 标签时才有效。为什么welcome.js中的同一个js没有运行?索引加载为 /welcome 路由。

# app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ace.min
//= require jquery.sortable
//= require chartkick
//= require hammer
//= require_tree .

外部js文件

# app/assets/javascripts/welcome.js

$('.chart-radio-icon').change(function()
  $('#mega_form').submit();
);

查看

# views/welcome/index.html.erb
<%= form_tag mega_chart_path, id: 'mega_form', remote: true do %>
    <%= radio_button_tag :metric_type, :followers_count, true, :class => 'chart-radio-icon'%>
    <%= label_tag(:followers, 'Followers', :class => 'chart-label chart-label-social') %>

同样,当将 js 放置在视图中的 &lt;script&gt; 标记中时,js 可以工作,但不能放在外部。

【问题讨论】:

页面上是否加载了javascript?你能得到一个console.log('Hello World'); 工作吗? @JamesMilani 如果我将console.log('Hello World'); 放在外部文件中,然后转到页面上的检查 > 控制台,我什么也看不到。 你重启服务器了吗?这可能与您的资产如何在本地包含在您的管道中有关。 是的,我已经重启了服务器 您的app/config/initializers/assets.rb 中发生了什么?里面有什么东西吗? 【参考方案1】:

编辑:

因为我们已确定您的资产文件未包含在开发中。要进行健全性检查,请尝试此操作并重新启动您的服务器:

Rails.application.config.assets.precompile = %w( application.js application.css )

结束编辑

由于您使用的是require_tree .,并且由于welcome.js 文件位于app/assets/javascripts 中,因此它将包含在您应用程序的所有页面中。 See here. 我认为问题在于页面加载时,事件侦听器没有分配给 DOM 元素。尝试将您的 JS 代码包装在:

#app/assets/javascripts/welcome.js

$(document).ready(function()
  ....
);

【讨论】:

我尝试包装现有的函数,但没有成功 你能看一下页面的html,看看页面上是否存在welcome.js文件吗?由于某种原因,该文件似乎没有包含在资产中。你使用的是什么版本的 Rails? 在检查页面元素并查看页面源代码时,我既找不到welcome.js,也找不到application.js。我使用 ctrl+f 并特别手动检查了&lt;head&gt; 我们的首席工程师不想让我编辑那个文件。我通过将脚本移动到analytics.js 来让它工作,它在welcome.js 之前加载。我确实必须将其包裹在 $(document).ready 中才能使其正常工作

以上是关于Rails Javascript onchange 适用于 <script> 但不适用于外部的主要内容,如果未能解决你的问题,请参考以下文章

在 Rails 中使用“f.input 集合”的 onChange 方法

Ruby on Rails 表单中的 select 和 onChange

javascript onchange onChange OnChange选择

onchange事件如何将日期值传递给javascript

Javascript Html.Checkbox onchange 事件

Javascript:如何让单选按钮的“onchange”事件通过外部函数触发?