你如何讓 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