Rails 5环境下edit.js.erb不执行，如何实现页面加载后自动点击链接？

问题根因 #

你访问/assignments/(id)/edit时走的是HTML格式的响应流程，Rails默认只会渲染edit.html.erb，同目录下的edit.js.erb是专门给JS格式请求使用的，不会被自动加载，这就是代码完全没有执行反馈的核心原因。

实现方案 #

你可以选择以下任意一种方式实现需求：

方案1：直接在HTML模板中嵌入JS逻辑（最常用） #

在edit.html.erb的末尾添加如下代码即可：

<script>
// Rails 5默认开启Turbolinks，需监听turbolinks:load事件代替$(document).ready
$(document).on('turbolinks:load', function() {
  // 调用原生DOM的click方法才能触发Rails remote链接的内置请求逻辑
  $('#display-contact a')[0].click();
  console.log('It works on each visit!');
});
</script>

方案2：把逻辑放到资产管道的全局JS文件中 #

如果该逻辑需要在多个页面复用，可以把代码写到app/assets/javascripts/assignments.js里，同时加页面判断避免其他页面报错：

$(document).on('turbolinks:load', function() {
  // 只在assignment编辑页执行逻辑，需提前给对应页面的body标签加上对应类名
  if (document.body.classList.contains('assignments-edit')) {
    const targetLink = $('#display-contact a')[0];
    if (targetLink) {
      targetLink.click();
      console.log('It works on each visit!');
    }
  }
});

必查配置项 #

• 确保app/assets/javascripts/application.js中已经引入了jQuery和ujs依赖，示例配置：

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

• 不要直接使用jQuery的click()方法触发remote链接，必须调用原生DOM节点的click方法，否则Rails的remote请求不会被触发。

内容的提问来源于stack exchange，提问作者thefonso