Bootstrap Javascript необходимо перезагрузить или не работает

Question

Проблема 1: Моё меню навигации на панели навигации не закроется, но откроется, если я не удалю из макета одно из следующего:

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

Теперь, когда я удаляю этоПереключатель работает и будет открываться и закрываться.Хотя мой модал входа не будет работать без него.

или:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Проблема 2:

У меня есть аккордеоны, которые не будут работать при первой загрузке, но затем будут работать после перезагрузки страницы.

Моя панель навигации в итоге:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <div class="container-fluid">
   <div class="navbar-header">
     <a class="navbar-brand" href="/">Navbar</a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
         <span class="navbar-toggler-icon"></span>
       </button>
   </div>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">

   <ul class="nav navbar-nav navbar-right">
     #more nav items code here
     <li class="nav-item-2 nav-display-2">
       <button type="button" class="btn ripple-effect btn-info btn-lg" id="myBtnSignIn2">Sign Up/Login</button>
       <div class="modal fade" id="SignInModal2" role="dialog">
         <div class="modal-dialog modal-dialog-centered" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
             </div>
             <div class="modal-body">
               <%= render "devise/shared/links" %>
              </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
           </div>
         </div>
       </div>
      </li>
    </div>

  </div>
</nav>


<script>
$(document).ready(function(){
    $("#myBtnSignIn").click(function(){
        $("#SignInModal").modal();
    });
});

</script>

код аккордеона:

<a class="collapsed card-link text-center" id="edit-accordion" data-toggle="collapse" href="#collapseFIRST">

      </a>
      <div id="collapseFIRST" class="collapse" data-parent="#accordion">
          <div class="card-body">

          </div>
      </div>

application.js:

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

//= require jquery

//= require Chart.bundle
//= require chartkick

Есть ли что-то, что вы видите в моем коде неправильно?

Answer 1

Вы можете попробовать это в вашем скрипте.Объясняется здесь

$( document ).on('turbolinks:load', function() {
  $("#myBtnSignIn").click(function(){
    $("#SignInModal").modal();
  });
});

Answer 2

Добавьте самоцвет начальной загрузки в свой Gemfile и удалите html-тег из макета

Gemifle

gem 'bootstrap', '~> 4.3.1'

У вас не должно быть 2 версий jQuery.

Тогдазапустите bundle install

Затем измените это на:

/= require rails-ujs
//= require activestorage
//= require jquery3
//= require jquery_ujs 
//= require popper
//= require bootstrap
//= require Chart.bundle
//= require chartkick
//= require turbolinks
//= require_tree .

Также в часовом приложении .scss вы должны иметь

@import "bootstrap";

Также в макете попробуйте вместо:

<%= javascript_include_tag 'application', 'data-turbolinks-track': true %>