如何让JS EventListeners在Rails 6/ webpacker中工作？
如何让JS EventListeners在Rails 6/ webpacker中工作？
提问于 2020-07-23 21:36:28
我正在尝试使用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)
}
})我现在只想在我的应用程序的一个特定页面上实现这个功能，所以我使用了一个包标签将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代码来自使用Rails5的教程，所以我猜测这可能与最近从资产管道切换到webpack有关。
Stack Overflow用户
发布于 2021-03-31 09:52:24
看一下这一行：
document.addEventListener('turboLinks:load', function () {如你所见，它监听“TurboLinks :load”事件，这在没有TurboLinks的应用程序中是不会发生的。
请记住，如果您不指定触发器，javascript将立即执行(此时您的按钮对于您的浏览器来说将是未知的)，因此请将此行更改为如下所示：
window.addEventListener('load', (event) => {您的代码将按预期运行。还要注意的是，我在“window”而不是“document”中添加了一个监听器，注意哪些对象有哪些可用的事件触发器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63055613
复制相关文章
相似问题
腾讯云开发者
