繁体   English   中英

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

[英]How do you make JS EventListeners work in Rails 6 / webpacker?

我正在尝试使用 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 有关。

看看这一行:

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

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

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

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM