Rails turbolink js发出一键下拉js不加载答案

【问题标题】：Rails turbolink js issue one click dropdown js not loadRails turbolink js发出一键下拉js不加载
【发布时间】：2019-12-14 12:33:05
【问题描述】：

Rails js 加载问题 Turbolinks gem。导航栏下拉菜单在页面刷新或第二次单击打开下拉菜单后单击不打开如何解决此问题。还有 kuse turbolinks gem 和 boostrap gem。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse">
  <% if current_user.present? %>
   <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
     <% Tabs::NAVBAR.each do|tab_key, tab|%>
       <% if tab[:type].eql?('dropdown_tab') %>
         <li class="nav-item dropdown <%= active_navbar(tab_key) %>">
           <% if current_user.projects.present? %>
              <%= link_to tab[:title], fetch_route(tab_key), class: 'nav-link dropdown-toggle', id: 'myTab', data: { toggle: "dropdown" }%>
          <%else%>
          <%end%>
         <div class="dropdown-menu">
          <% dropdown_options(tab_key).each do|option| %>
            <%= link_to option[:title], option[:path], class:'dropdown-item' %>
          <% end %>
          </div>
         </li>
       <% else %>
        <li class="nav-item <%= active_navbar(tab_key) %>">
         <%= link_to tab[:title], fetch_route(tab_key), class: 'nav-link'%>
        </li>
     <% end %>
    <% end %>
  </ul>
  <div class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Profile <b class="caret"></b></a>
     <div class="dropdown-menu dropdown-menu-right">
       <li><%= link_to " Profile", edit_user_registration_path, class: "dropdown-item" %></li>
       <li><%= link_to " Sign Out", destroy_user_session_path, method: :delete, class: "dropdown-item" %></li>
   </div>  
  </div>
<%end%>
</div>
</nav>

【问题讨论】：

显示您的代码。 turbolinks 的好处是它不是一个完整的页面重新加载，它只是替换了现有页面的HTML内容（有点像document.body.innerHTML = newPage加上一些东西头部）。许多全局范围内的 JS 或加载事件处理程序将无法运行。
感谢您的回复，已经添加代码我的导航栏项目下拉菜单双击显示。如果你想显示其他代码，我会添加代码。

标签： ruby-on-rails turbolinks

【解决方案1】：

我认为您需要在触发事件turbolinks:load时重新初始化需要引导js的元素，请检查此问题Rails Bootstrap 4 with Turbolinks

是关于tooltip js，但同样适用于任何需要js初始化的元素。

类似：

$(document).on('turbolinks:load', function() {
  $('.dropdown-toggle').dropdown()
})

【讨论】：

【解决方案2】：

在使用@vizuaalog/bulmajs 时，您可能在turbolinks:load 事件中需要Dropdown.parseDocument(element) 或Bulma(element).dropdown()。

// global `bulmaOptions` object should be defined before BulmaJS has loaded
// disable autoParse to prevent repeated `turbolinks:load` event
window.bulmaOptions = {
  autoParseDocument: false 
}
// import Dropdown from '@vizuaalog/bulmajs/src/plugins/dropdown';
import Bulma from "@vizuaalog/bulmajs";

document.addEventListener("turbolinks:load", () => {
  Bulma.parseDocument();
  // Dropdown.parseDocument(document.getElementsByTagName('body')[0]);

  Array.from(document.querySelectorAll('.dropdown')).forEach(element => {
    Bulma(element).dropdown();
  });
});

注意：bulmaOptions.autoParseDocument = false

【讨论】：