javascript - Bootstrap 下拉列表在初始 ajax 表单提交后不起作用

Question

我的页面上有一个下拉菜单，manager.php，在这里。抱歉格式化 - bootstrap.:

  <!-- Bootstrap -->
  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../css/bootstrapstyle.css">
  <!-- Bootstrap Dropdown Enhancements-->
  <script type="text/javascript" src="../../js/dropdowns-enhancement.js"></script>
  <link rel="stylesheet" href="../../css/dropdowns-enhancement.css">

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="false">Search By <span class="caret"></span></button>
        <ul id="searchBy" class="dropdown-menu" role="menu">
          <li class="disabled"><a href="#">Search By...</a></li>
          <li><a href="#">cost</a></li>
          <li><a href="#">name</a></li>              
        </ul>
      </div>               
    </div>
  </div>
</div>

<div id="everything">
</div>

当我直接加载 manager.php 并且下拉列表初始化时，这段代码工作正常，但这不是我需要代码工作的方式。

用户从 return.php 开始；此页面从用户那里收集大量数据并将其返回到manager.php。

一旦用户在 return.php 上选择这样做，就会运行此代码:

$.ajax({
      type: 'POST',
      url: 'manager.php',      
      data: {number:number, location:location, project:project, comments:comments},        
        success:function(data){
        $('#everything').html(data);                                                            
        }
  });

ajax 调用工作正常，它将从 manager.php 返回的数据加载到 everything div 中。它按预期传递数据。将 manager.php 加载到 DIV 后唯一不起作用的是下拉菜单。我需要了解我做错了什么导致了这个功能，这样我就可以避免在未来这样做。

Answer 1

您不能通过添加 Bootstrap 类在页面加载后初始化 Bootstrap 组件。为此，您必须自己初始化它

要初始化下拉菜单，请编写此代码

$('.dropdown-toggle').dropdown();

之后

  $('#everything').html(data);

了解更多详情:http://getbootstrap.com/javascript/#dropdowns