Question

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

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文件已正确包含在我的应用程序中，因为我在console.log中放置的任何project.js语句都将出现在浏览器控制台中。 project.js中的js代码来自使用Rails 5的教程，因此我猜想这可能与最近从资产管道到Webpack的切换有关。

Answer 1

看看这一行：

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

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

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

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

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

如何使Rails 6 / webpacker中的JS EventListeners工作？

1 个答案: