在 Rails 6 中使用 webpacker 的 Javascript (UJS) 错误答案

【问题标题】：Javascript (UJS) error using webpacker in rails 6在 Rails 6 中使用 webpacker 的 Javascript (UJS) 错误
【发布时间】：2020-01-12 19:53:38
【问题描述】：

我有一个使用单个控制器和索引视图创建的非常基本的 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 个链接，我有开发者工具在控制台页面上打开以查看我的消息“在 hide_link 中”。它还显示以下信息：

hide_link.js:10

这显示在控制台的最右侧。单击链接“应该消失”，实际上在单击时会消失，但是，当我单击时 “返回此处”链接页面被刷新，并且在控制台窗口中进行了以下更改：

hide_link.js:10

#replaced by

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

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

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

另外，这是否与 rails 6、webpacker 或 javascript 或其中一种或全部的组合有关？

如果可以提供任何其他信息来帮助解决问题，请告诉我？

【问题讨论】：

标签： javascript ruby-on-rails-6 webpacker

【解决方案1】：

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

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

主要是改变以下内容：

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

# to

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

即使在使用链接重定向回同一页面后，我所有的 javascript 都可以正常工作

【讨论】：