Turbolinks 实现 document.ready，点击切换
Posted
技术标签:
【中文标题】Turbolinks 实现 document.ready，点击切换【英文标题】：Turbolinks implementation of document.ready with toggle on click 【发布时间】：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 的帮助。
【问题讨论】：
【参考方案1】：您的 app/views/layouts/application.html.erb 中添加了 defer: true 吗？
这允许在运行 javascript 之前等待 DOM 完全加载。
<head>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
</head>
【讨论】：
以上是关于Turbolinks 实现 document.ready，点击切换的主要内容，如果未能解决你的问题，请参考以下文章