你如何让 JS EventListeners 在 Rails 6 / webpacker 中工作？答案

【问题标题】：How do you make JS EventListeners work in Rails 6 / webpacker?你如何让 JS EventListeners 在 Rails 6 / webpacker 中工作？
【发布时间】：2020-07-23 13:36:27
【问题描述】：

我正在尝试使用 Ruby 2.7.1 和 Rails 6.0.3.2 构建一个 Web 应用程序。在页面上，我希望在用户单击按钮时出现 html 弹出框。我有一些香草 JS 代码，当用户单击按钮时，它只是从我的弹出框 div 中删除了一个 is-hidden 类，从而使弹出框可见。

app/javascript/packs/project.js:

document.addEventListener('turboLinks:load', function () {
    const createProjectButton = document.getElementById('create-project-button')
    const projectPopover = document.getElementById('create-project-popover')

    if (createProjectButton && projectPopover) {
        createProjectButton.addEventListener('click', function () {
            return projectPopover.classList.contains('is-hidden') ? projectPopover.classList.remove('is-hidden') : null
        }, false)

        const cancelProjectPopover = document.getElementById('cancel-project-popover')
        cancelProjectPopover.addEventListener('click', function () {
            return projectPopover.classList.add('is-hidden')
        }, false)
    }
})

我现在只希望在我的应用程序的一个特定页面上使用此功能，因此我使用 pack 标记将 project.js 包含在相应的 html 文件中。

app/views/project/index.html.erb:

<html>
   <body>
      ...
      <%= javascript_pack_tag 'project' %>
   </body>
</html>

但是，此代码无法按预期工作。单击相应的按钮不会使我的弹出窗口出现。我可以确认 js 文件正确包含在我的应用程序中，因为我在 project.js 中放置的任何 console.log 语句都将出现在浏览器控制台中。 project.js 中的 js 代码来自一个使用 Rails 5 的教程，所以我猜这可能与最近从资产管道切换到 webpack 有一些关系。

【问题讨论】：

你在某处初始化了turbolinks吗？事件名称不都是小写的，即“turbolinks:load”吗？
谢谢！！这完全解决了它。我永远不会猜到这实际上是区分大小写的！

标签： javascript html ruby-on-rails

【解决方案1】：

看看这一行：

document.addEventListener('turboLinks:load', function () {

如您所见，它会侦听“turboLinks:load”事件，这在没有 TurboLinks 的应用程序中不会发生。

请记住，如果您不指定触发器，javascript 将立即执行（此时您的按钮将完全不被您的浏览器所识别），因此将此行更改为：

window.addEventListener('load', (event) => {

您的代码将按预期运行。另请注意，我正在向“窗口”而不是“文档”添加侦听器，请注意哪些对象具有哪些可用的事件触发器。

【讨论】：