我的页面上有一个下拉菜单,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 后唯一不起作用的是下拉菜单。我需要了解我做错了什么导致了这个功能,这样我就可以避免在未来这样做。
最佳答案
您不能通过添加 Bootstrap 类在页面加载后初始化 Bootstrap 组件。为此,您必须自己初始化它
要初始化下拉菜单,请编写此代码
$('.dropdown-toggle').dropdown();
之后
$('#everything').html(data);
关于javascript - Bootstrap 下拉列表在初始 ajax 表单提交后不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30578971/