Rails 7 onclick调用application.js函数报错：找不到openNav变量

核心原因：Rails 7的JS模块化作用域限制 #

Rails 7默认将application.js作为**ES模块（ESM）**处理，模块内定义的变量、函数默认处于私有作用域，不会自动挂载到全局window对象上。而你在HTML标签里用onclick="openNav()"调用函数时，是从全局作用域查找openNav，自然找不到，就会抛出ReferenceError。

反观直接写在视图页面的<script>标签，默认是非模块模式，函数会自动挂载到window全局作用域，所以能被正常调用。至于你说application.js里其他jQuery代码能正常工作，是因为配置后jQuery本身已经挂载到全局window对象，且那些代码通常包裹在$(function(){...})这类DOM就绪回调里，作用域没问题。

可行解决方案 #

方案1：手动将函数挂载到全局window对象 #

修改application.js里的函数定义，把函数绑定到window上，让全局作用域能访问到：

window.openNav = function() {
  // 你的侧边栏展开逻辑
}

window.closeNav = function() {
  // 你的侧边栏关闭逻辑
}

方案2：改用事件委托绑定（推荐，避免全局污染） #

放弃HTML标签内的onclick属性，用jQuery通过选择器绑定事件，更符合Rails模块化的最佳实践：

// 用jQuery的事件委托写法（适配Turbo页面加载）
$(document).on('click', '.open-nav-btn', function() {
  // 这里写openNav的逻辑，比如：
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
})

$(document).on('click', '.close-nav-btn', function() {
  // 这里写closeNav的逻辑，比如：
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
})

然后把HTML里的<span onclick="openNav()">改成带对应类名的标签，比如<span class="open-nav-btn">。

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