初始ajax表单提交后引导下拉菜单不起作用答案

【问题标题】：Bootstrap dropdown not working after initial ajax form submission初始ajax表单提交后引导下拉菜单不起作用
【发布时间】：2015-08-15 05:39:20
【问题描述】：

我的页面上有一个下拉列表，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 返回的数据加载到everything div 中。它按预期传递数据。将manager.php 加载到 DIV 后唯一不起作用的是下拉菜单。我需要了解我做错了什么导致此功能，以便我可以防止将来这样做。

【问题讨论】：

因为您可能正在替换 html 并且事件不会神奇地重新连接起来。您需要重新运行代码或了解事件委托。
你能提供重现问题的 plunker 吗？
你能发布你调用来创建下拉列表的代码吗？您是否尝试过在 AJAX 回调中简单地调用 $("#searchBy").dropdown();？
@tymeJV，下拉列表是我原始问题中的第一部分代码。它通过引导程序的下拉增强 .css 和 .js 文件（behigh.github.io/bootstrap_dropdowns_enhancement）进行操作
@JohnWu -- 你试过回忆它吗？

标签： javascript jquery html ajax twitter-bootstrap

【解决方案1】：

您无法在页面加载后通过添加引导程序类来初始化引导程序组件。为此，您必须自己初始化它

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

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

之后

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

【讨论】：

这同样有效 - 将 dropdown() 添加到 .dropdown-toggle 类，而不是 <ul id="searchBy"。有趣的是，我既可以这样做，也可以强制重新加载bootstrap.js。不管怎样，我很感激这个！我喜欢有不止一种方法来完成某事。
是的，您可以这样做，但它会重新初始化该页面上所有具有 .dropdown-toggle 类的下拉菜单

【解决方案2】：

将数据加载到所有 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() 调用。你可以这样做，但是效率很低。

【讨论】：

是的，试图删除:)。不幸的是，您的回答不会导致manager.php 上的下拉菜单对我起作用。我的回答（如下）确实有效，但我不明白为什么。
看来你的逻辑确实是正确的——我们只是关注了错误的元素。在成功调用后添加$('.dropdown-toggle').dropdown();，但我看不到此解决方案和我的解决方案之间的 Chrome 控制台（速度方面）有任何区别。但是现在有两种方法来解决这个问题真是太好了；它已经困扰我好几个月了！无论哪种方式，我都感谢您花时间帮助我理解这一点。
当您说doesn't cause the DOM to reload 时，这是否意味着manager.php 的<head> 部分没有被加载？我不确定这完全意味着什么......
head 部分是它的一部分，但整个 html 文档在 DOM（文档对象模型）中。每个网页都有自己的 DOM，浏览器可以使用它，您可以使用 JavaScript 进行操作。 en.wikipedia.org/wiki/Document_Object_Model
完美！！。直到今天，我一直在推迟加载 bootstrap.js，直到我所有的 ajax 调用完成，并带有一些蹩脚的代码。但是现在我把它换成了$('....').dropdown(); 谢谢！！

【解决方案3】：

所以我不确定为什么会这样，但到目前为止：

我已经修改了我的 ajax 调用以在执行返回之前重新加载引导程序的 .js 文件。

function reload_js(src) {
    $('script[src="' + src + '"]').remove();
    $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
}

$.ajax({
      ...      
        success:function(data){
        reload_js('https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js');                
        $('#everything').html(data);                                                            
        }
  });

对于赏金，有人可以向我解释一下吗：

a.) 为什么我需要强制重新加载 bootstrap.min.js？

b.) 如果我在两个文件的 <head> 部分中都有指向此文件的链接，为什么还要这样做？

  <!-- 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">

我也尝试将它加载到一个中，但不是另一个（所以我不加载它两次，）并且没有任何作用。

c.) 为什么会这样？它在做什么？

【讨论】：

【解决方案4】：

页面将第一次加载 DOM。 ajax 只是更新页面的一部分，所以你添加的新元素不会有你定义的道具。您需要像以前一样重新启动或制作类似的东西

http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/

【讨论】：

【解决方案5】：

我想分享我的经验：我正在做动态的多层下拉菜单，这意味着用户可以自定义这个菜单有多少父母和孩子。所以，在ajax提交之后，我清空了菜单所在的导航栏 $(document).find('.navbar-nav').empty();

并用新的 html 填充它：
html.push("

" + val.PageName + ""); // 它是 OnTop

并将其附加到我的导航栏： $(".navbar-nav").append(html.join(''));

并且下拉项目在那里，但它不起作用。原因是您必须再次为新的 html 项加载所有 js 和 css。

这里是 os 静态多层菜单的好例子：https://github.com/kmlpandey77/bootnavbar

所以，重点是在将新的 html 附加到 DOM 项之后，您需要重新加载页面以使其正常工作，或者加载新 html 项正在使用的资源；

这里是如何加载ajax和追加过程：

        jQuery.ajaxSetup({ async: false });
        $.get("wwwroot/bootnavbar/bootnavbar.css")
            .done(function () {
                // exists code 

                jQuery.ajaxSetup({
                    async: true

                });

            }).fail(function () {
                // not exists code

                jQuery.ajaxSetup({ async: true });

            });

【讨论】：