首次提交Ajax表单后，Bootstrap下拉列表不起作用

小编典典

首次提交Ajax表单后，Bootstrap下拉列表不起作用

ajax

我的页面上有一个下拉菜单manager.php，在这里。抱歉，格式化-引导程序：

  <!-- 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到everythingdiv中。它按预期传递数据。加载manager.php到DIV
时唯一不起作用的是下拉菜单。我需要了解我在做错什么导致该功能，以便将来避免这样做。

阅读 253

2020-07-26

共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片段的引用也行不通，因为您不希望用户自己访问该组件。

The reload you are doing appears to be forcing the content to be re-added to
the page, thus forcing the $( document ).ready() call in the included file
to be re-executed. You can do this, but it’s very inefficient.

2020-07-26