如何在Rails 7中创建并触发简单的onclick JavaScript函数？

问题原因 #

你猜的没错——Rails 7的资产管线会把所有JS代码包裹在**立即执行函数表达式（IIFE）**里，这意味着你定义的myTest函数只存在于IIFE的局部作用域中，无法被全局作用域（比如HTML的onclick属性、浏览器控制台）访问到。

解决方案 #

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

修改app/javascript/application.js，把函数暴露到全局作用域：

// app/javascript/application.js
function myTest(myVar){
    alert(myVar);
};
// 将函数挂载到window对象，使其成为全局可用
window.myTest = myTest;

myTest("test1");

这样修改后，HTML里的onclick="myTest('test2')"就能正常触发函数，控制台也能直接调用myTest("test3")。

方案2：使用事件监听替代onclick属性（推荐） #

现代前端开发更推荐用事件监听绑定交互，避免直接在HTML里写内联事件，也能规避作用域问题。

1. 给视图中的链接添加标识（比如id或data属性）：

<!-- 视图文件 -->
<a href="#" id="test-link">test</a>

2. 在app/javascript/application.js中添加事件监听：

// app/javascript/application.js
function myTest(myVar){
    alert(myVar);
};

myTest("test1");

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const testLink = document.getElementById('test-link');
  if (testLink) {
    testLink.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      myTest('test2');
    });
  }
});

如果你的项目使用Turbo（Rails 7默认包含），可以改用turbo:load事件确保页面刷新/导航后事件能重新绑定：

document.addEventListener('turbo:load', function() {
  const testLink = document.getElementById('test-link');
  if (testLink) {
    testLink.addEventListener('click', function(e) {
      e.preventDefault();
      myTest('test2');
    });
  }
});

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