时间戳

首页 > 解决方案 > 在 Rails 6 中使用 webpacker 的 Javascript (UJS) 错误

javascript - 在 Rails 6 中使用 webpacker 的 Javascript (UJS) 错误

问题描述

我有一个使用单个控制器和索引视图创建的非常基本的 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 或其中一个或全部的组合是否存在问题？

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

标签： javascriptruby-on-rails-6webpacker

解决方案

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

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

要点是更改以下内容：

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

# to

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

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

推荐阅读