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

你可以在你的脚本中试试这个。说明here

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

Answer 2

将引导 gem 添加到您的 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 %>