时间戳

首页 > 解决方案 > Bootstrap javascript 需要重新加载，或无法正常工作

ruby-on-rails - Bootstrap javascript 需要重新加载，或无法正常工作

问题描述

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

应用程序.js：

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

//= require jquery

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

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

标签： ruby-on-railsrubytwitter-bootstrap

解决方案

你可以在你的脚本中试试这个。这里解释

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

推荐阅读