初始ajax表单提交后Bootstrap下拉列表无法正常工作

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调用正常工作,它将从div 返回的数据加载manager.php到everythingdiv中.它按预期传递数据.加载manager.php到DIV中唯一不起作用的是下拉列表.我需要了解我做错了导致这个功能,所以我可以防止将来这样做.

Answer 1

将数据加载到everything div后,需要手动重置下拉列表.我已经修改了你的AJAX调用,以告诉你在哪里拨打电话.

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

您正在进行的动态加载不会导致DOM重新加载,从而迫使下拉列表重新初始化.在您完成AJAX调用之后,您可以通过调用手动重置引导程序下拉列表.dropdown();.

编辑

通常,使用$( document ).ready()调用设置功能的引导程序中的功能.在加载DOM之后并且仅在DOM已经完全加载之后,该函数执行一次.由于您操作DOM,因此不会再次触发该功能,您需要手动触发所需的功能.

您还希望在每个页面上仅加载一次包含.他们需要在manager.php上,以便在您进入成功方法时可以使用该功能.我建议您为项目使用模板,以便在一个地方管理所有包含.此外,如果您使用manager.php作为要包含在另一个页面中的页面,那么如果您没有对JavaScript部分的引用则无效,因为您不希望用户自己访问该组件.

您正在执行的重新加载似乎强制将内容重新添加到页面,从而强制$( document ).ready()重新执行包含文件中的调用.你可以这样做,但效率很低.

Answer 2

通过添加bootstrap clasaes,您无法在页面加载后初始化引导程序组件.要做到这一点,你必须自己初始化它

要初始化下拉列表,请编写此代码

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

后

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

有关更多详细信息,请访问:http://getbootstrap.com/javascript/#dropdowns