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

Question

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

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 有关。

Answer 1

看看这一行：

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

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

请记住，如果您不指定触发器，javascript 将立即执行（此时您的按钮对您的浏览器来说是未知的），因此将此行更改为：

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

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

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

问题描述

1 个解决方案

解决方案1
0 2021-03-31 01:52:23

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

问题描述

1 个解决方案

解决方案1 0 2021-03-31 01:52:23

解决方案1
0 2021-03-31 01:52:23