问题描述
由于 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 的任何帮助。
解决方法
您是否在 app/views/layouts/application.html.erb 中添加了 defer: true？
这允许在运行 Javascript 之前等待 DOM 完全加载。
<head>
<%= javascript_pack_tag 'application','data-turbolinks-track': 'reload',defer: true %>
</head>