Javascript (UJS) 在 rails 6 中使用 webpacker 时出错

Question

我有一个非常基本的 rails 6 应用程序，它使用单个控制器和索引视图创建，看起来像：

$ cat app/views/welcome/index.html.erb 
<%= javascript_pack_tag 'hide_link' %>

<%= link_to "back here", root_url %>
  <br \>
<%= link_to "Should Disappear", root_path, id: 'be_gone', remote: true %>

包含在 hide_link 中的 javascript 看起来像：

$ cat app/javascript/packs/hide_link.js 
window.addEventListener('load', () => {
//document.addEventListener('DOMContentLoaded', () => {
//window.onload = () => {
    let link = document.getElementById('be_gone');

    if (link) {
        link.onclick = () => link.style.display = "none";
    }

    console.log("In hide_link"); // just here to let me know it is running
} , false);

启动服务器后，页面准确显示 2 links，我有开发者工具在控制台页面上打开以查看我的消息 "In hide_link"。它还显示以下信息：

hide_link.js:10

它出现在控制台的最右侧。单击 link "Should Disappear"，实际上在单击时会消失，但是，当我单击 "back here" link 页面刷新并且在控制台中进行了以下更改 window:

hide_link.js:10

#replaced by

VM58 hide_link-8e7e6…20e4f0e3eed3.js:107

现在 VM58 和 hide_link 之后的随机字符 - 每次重试该过程时都会更改，但问题是，从现在开始，虽然我可以再次看到"Should Disappear" link，但一旦点击它就不会再消失，直到我刷新整个页面！

所以我的问题是，有没有其他人遇到过这个问题并因此得到解决？

此外，这是 rails 6、webpacker 或 javascript 还是其中一个或所有组合的问题？

请让我知道是否可以提供任何其他信息来帮助解决问题？

Answer 1

原来可以在以下页面找到解决方案：

https://guides.rubyonrails.org/working_with_javascript_in_rails.html#page-change-events

要点是更改以下内容：

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

# to

window.addEventListener('turbolinks:load', () => {

即使在使用 link

重定向回同一页面后，我所有的 javascript 都可以正常工作

Javascript (UJS) 在 rails 6 中使用 webpacker 时出错

Javascript (UJS) error using webpacker in rails 6

javascript

ruby-on-rails-6

webpacker