我的页面上有一个下拉菜单manager.php,在这里。抱歉,格式化-引导程序:
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
一旦用户选择执行操作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 时唯一不起作用的是下拉菜单。我需要了解我在做错什么导致该功能,以便将来避免这样做。
everything
将数据加载到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();。
.dropdown();
编辑
通常,引导中用于功能的功能是通过$( document ).ready()调用来设置的。在加载DOM之后且仅在完全加载DOM之后,此函数执行一次。由于操作了DOM,因此不会再次触发该功能,而是需要手动触发所需的功能。
$( document ).ready()
您还希望在每个页面上仅加载一次包含。他们需要在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.