时间戳

首页 > 解决方案 > Turbolinks 实现 document.ready，点击切换

javascript - Turbolinks 实现 document.ready，点击切换

问题描述

由于 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 的任何帮助。

标签： javascriptjqueryruby-on-railsruby-on-rails-6turbolinks

解决方案

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

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

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

推荐阅读