Question

刚开始学习html已有几个星期。调用jquery load（）后，下拉菜单停止工作。当页面第一次加载时，它工作正常，但是在加载页面后，我只能单击最初的选择。我已经尝试了.on（'click，...）和.delegate（）两者。似乎没有任何工作。我不知道这是引导问题还是jquery问题，或者我对此还太陌生。这是一个非常麻烦的几个小时！谢谢。

$(document).ready(function(){

  $(".dropdown-menu").on("click","a",function(){
    let myPage = $(this).attr("data-target");
    $("#loadPhp").load(myPage);
  });

  $(document).delegate("#studentNames","click",function(){
    $("#loadPhp").load("namegen.html");
  });  
});

<body>

      <nav class="navbar navbar-expand-sm navbar-light bg-dark ">
      
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">

          <li class="nav-item">
            <div class="btn-group">
              <button type="button" class="btn btn-secondary dropdown-toggle border-warning" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Algebra 1
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#" id="rounding" data-target="a1.html">Rounding</a>
              </div>
            </div>
          </li>

          <li class="nav-item">
            <div class="btn-group">
              <button type="button" class="btn btn-secondary dropdown-toggle border-warning" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Geometry
              </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#" id="SAandVolume" data-target="GeoCalculator.html">SA & Volume</a>
                <a class="dropdown-item" href="#">Coordinate Geometry</a>
            </div>
          </li>
        </ul>

        
          <a class="nav-link text-warning" href="#" id="studentNames">Name</a>
        

      </div>

    </nav>

    <div id="loadPhp">

  </div>


  
  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  
</body>

引导加载下拉菜单后，Bootstrap下拉菜单停止工作

0 个答案: