Rails 7中链接无法调用JS函数问题求助

你的问题核心是Turbo对页面脚本作用域的处理导致的：Turbo会将内联脚本包裹在局部作用域中，你定义的show_alert函数没有暴露到全局window对象上。p标签能正常调用是因为它的事件触发时，作用域仍能访问到函数；而a标签即使添加了data-turbo="false"，其onclick事件调用时无法找到全局作用域中的函数，因此报错。

下面提供两种可行的解决方法：

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

直接把函数绑定到window上，确保全局可访问：

<script>
  window.show_alert = function() {
    alert("提示内容");
  }
</script>
<a href="#" data-turbo="false" onclick="show_alert()">Alert a</a>
<p onclick="show_alert()">Alert p</p>

这种方式改动最小，可快速修复问题，但仍依赖内联事件写法。

方案二：使用事件监听替代内联onclick（推荐） #

避免内联事件的作用域问题，改用事件监听绑定逻辑，同时适配Turbo的页面生命周期：

<script>
  // 用turbo:load替代DOMContentLoaded，适配Turbo页面置换机制
  document.addEventListener('turbo:load', function() {
    // 处理a标签点击
    const alertLink = document.querySelector('a[data-turbo="false"]');
    if (alertLink) {
      alertLink.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止a标签默认的锚点跳转行为
        alert("提示内容");
      });
    }

    // 处理p标签点击
    const alertPara = document.querySelector('p.alert-trigger');
    if (alertPara) {
      alertPara.addEventListener('click', function() {
        alert("提示内容");
      });
    }
  });
</script>
<a href="#" data-turbo="false">Alert a</a>
<p class="alert-trigger">Alert p</p>

这种方式更符合现代前端实践，代码更易维护，也能彻底避免Turbo带来的作用域冲突问题。

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