Turbolinks 实现 document.ready，点击切换答案

【问题标题】：Turbolinks implementation of document.ready with toggle on clickTurbolinks 实现 document.ready，点击切换
【发布时间】：2021-06-14 16:43:01
【问题描述】：

由于 Rails 6.1 弃用了 .ready()，我尝试寻找一种行为相似的替代方法。这就是为什么考虑将此功能迁移到 turbolinks 以使其与 Rails 6.1 一起使用的原因。当前函数如下所示：

$(document).ready(() => {
    $('.toggle').on('click', (e) => {
        e.stopPropagation();
        e.preventDefault();
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden');
    })
})

这是我想用函数切换的带有“隐藏”的代码。

<div class="content">
    <%= form_for :user, url: users_edit_url(@user), action: :update, method: :post, html: {id: 'user-about', class: 'is-hidden'} do |f| %>
        <div class="field">
        <%= f.text_area :about, autofocus: true, autocomplete: 'form', class: 'input'%>
        </div>
        <a class="toggle button is-light" aria-controls="user-about">Cancel</a>
        <%= f.submit "Save", class: "button is-danger"%>
    <% end %>
</div>

我只是公然切换到 turbolinks 函数头的尝试没有按计划工作。

document.addEventListener("turbolinks:load", () => {
    $('.toggle').on('click', (e) => {
        e.stopPropagation();
        e.preventDefault();
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden');
    })
});

非常感谢任何有关如何将此功能迁移到 Rails 6.1 的帮助。

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-6 turbolinks

【解决方案1】：

您的 app/views/layouts/application.html.erb 中添加了 defer: true 吗？

这允许在运行 Javascript 之前等待 DOM 完全加载。

<head>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
</head>

【讨论】：