Bootstrap javascript需要重新加载或无法运行

Posted 2023-01-05

问题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

有没有你看到我的代码中的错误？

答案

您可以在脚本中尝试此操作。它解释了here

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

另一答案

将bootstrap 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 .

同样在小时application.scss你应该有

@import "bootstrap";

同样在布局中尝试：

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