Rails 5.2如何正确配置jQuery？配置后create.js.erb不生效如何排查

前置验证：确认jQuery是否加载成功 #

打开浏览器控制台（F12），输入$或jQuery命令：

• 若返回undefined，说明jQuery未正常加载，走「jQuery加载故障排查」流程
• 若返回函数定义，说明jQuery加载正常，走「业务逻辑故障排查」流程

jQuery加载故障排查 #

• 修正资产引入顺序：app/assets/javascripts/application.js中require_tree .必须放在所有依赖库的末尾，否则自定义代码会在依赖加载完成前执行，正确配置如下：

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

• 清除Rails资产缓存：执行命令rails tmp:clear assets:clean后重启服务重试
• 检查页面源码头部的JS引入标签，确认jQuery文件没有返回404错误

业务逻辑故障排查 #

1. 修正create.js.erb语法错误 #

你当前代码缺少对渲染结果的引号包裹，会直接导致JS语法报错，修正后代码如下：

$('#comment_content').val('');
$('#comment_div').prepend('<%= j render @comment %>');

2. 验证控制器响应配置 #

确认comments_controller.rb的create动作中配置了js格式响应，示例如下：

def create
  @comment = current_user.comments.build(comment_params)
  if @comment.save
    respond_to do |format|
      format.js # 必须存在该配置才会渲染create.js.erb模板
      format.html { redirect_to comments_path }
    end
  end
end

3. 校验DOM元素匹配 #

确认页面上的评论输入框ID为comment_content、评论容器ID为comment_div，无拼写、大小写错误。

4. 排查Turbolinks冲突 #

可临时注释application.js中的//= require turbolinks重启服务测试，若恢复正常，可将JS代码包裹在Turbolinks加载监听内：

document.addEventListener('turbolinks:load', function() {
  $('#comment_content').val('');
  $('#comment_div').prepend('<%= j render @comment %>');
})

5. 验证局部模板可用性 #

确认_comment.html.erb中的comment变量可正常取值，@comment创建成功后不为空。

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