ruby > 2.6.5
rails > 5.2.4.2
$(document).ready(function(){
$("#menu").on("click", function() {
$(this).next().slideToggle();
});
});
Using jquery, I added a hamburger menu that can be opened and closed without any change. Aside from the good and bad of the JS code itself, there should be no problem in operation.
It works fine at initial load. The behavior is strange at the time of page transition and browser back. It ignites with a click, but it loops opening and closing and is unstable. It works normally when reloaded.
It's working, so maybe the loading timing is wrong?
→ You can't even try everything like ready
ʻonload ʻajaxStop
.
After consulting with Google Sensei, I found such a description
$(document).on('turbolinks:load', function () {
...
});
turbolinks: load
I've never seen this ...
Apparently Rails' own description.
I referred to this article. turbolinks cheat sheet
--Library (Gem) for speeding up page transition by Ajax --From the user's point of view, it is displayed / behaves like a normal page transition. --Installed by default from Rails 4
In other words, this function seems to have affected JS this time.
Since it is a Gem, it can be solved by erasing it, but it will not be solved. I researched how to handle it.
This is the main treatment.
If you specify {"turbolinks "=> false}
in the link itself
That link will have turbolinks disabled.
<%= link_to "HOGE", root_path, data: {"turbolinks" => false} %>
<%# => <a data-turbolinks="false" href="/">HOGE</a> %>
If you write this, you can definitely remove turbolinks. It seems to be good if you control only a specific script, but it seems to be difficult to write it all ...
Delete this line
Gemfile
#gem 'turbolinks', '~> 5'
Terminal
$ bundle update
app/assets/javascripts/application.js
//= require turbolinks #Delete this line
'data-turbolinks-track': Remove'reload'
.
erb:app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
It has now been disabled. It may be certain that it will be disabled unless it is a site that makes heavy use of JS.
Like ready
ʻonload` etc.
With this description, turbolinks can be loaded without adaptation.
$(document).on('turbolinks:load', function () {
...
});
In addition, you can change the timing of applying turbolinks. If you want to know more, please click here. [Take other life cycle events](https://qiita.com/morrr/items/54f4be21032a45fd4fe9#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3 % 83% A9% E3% 82% A4% E3% 83% 95% E3% 82% B5% E3% 82% A4% E3% 82% AF% E3% 83% AB% E3% 82% A4% E3% 83 % 99% E3% 83% B3% E3% 83% 88% E3% 82% 92% E3% 81% A8% E3% 82% 8B "Take other life cycle events")
I think this is the best solution this time, as fine-tuning works for each script.
Is Turbolinks a great feature or a noisy feature ... I can't say either for now lol I'm sure it should be installed by default, but ... If you know how to use it more effectively, please leave a comment!