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

您需要在将数据加载到所有div中后手动重置下拉列表。我已修改您的AJAX通话，以显示您拨打电话的位置。

uuid

您正在执行的动态加载不会导致DOM重新加载，从而迫使下拉列表重新初始化。在您完成AJAX调用之后，您可以通过调用$.ajax({ type: 'POST', url: 'manager.php', data: {number:number, location:location, project:project, comments:comments}, success:function(data){ $('#everything').html(data); $('#searchBy').dropdown(); } });手动重置引导下拉。

修改

通常，使用.dropdown();调用设置功能的引导程序中的功能。在加载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

Answer 3

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

我在执行返回之前修改了我的ajax调用以重新加载bootstrap的.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。）如果我在BOTH文件的<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。）为什么这样做？它在做什么？

Answer 4

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

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

Answer 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 和 append 进程之后加载：

        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 });

            });

初始ajax表单提交后，引导程序下拉列表无效

5 个答案: