twitter-bootstrap 初始 ajax 表单提交后，Bootstrap 下拉菜单不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30578971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown not working after initial ajax form submission
提问by Brian Powell
I have a dropdown on my page, manager.php, here. Sorry for the formatting - bootstrap.:
我的页面上有一个下拉菜单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>
This code works fine when I load manager.phpdirectlyand the dropdown initializes, but this is not how I need the code to work.
当我manager.php直接加载并初始化下拉列表时，此代码工作正常，但这不是我需要代码工作的方式。
The user begins on return.php; this page collects a bunch of data from the user and returnsit to manager.php.
用户开始于return.php; 此页面从用户那里收集一堆数据并将其返回给manager.php.
Once the user selects to do so on return.php, this code is run:
一旦用户选择这样做return.php，就会运行以下代码：
$.ajax({
type: 'POST',
url: 'manager.php',
data: {number:number, location:location, project:project, comments:comments},
success:function(data){
$('#everything').html(data);
}
});
The ajax call works correctly, and it loads the data returned from manager.phpinto the everythingdiv. It passes along the data as expected. The only thing that DOESN'T work upon loading manager.phpinto the DIV is the drop-down. I need to understand what I'm doing wrong to cause this functionality so I can prevent doing it in the future.
ajax 调用工作正常，并将返回的数据加载manager.php到everythingdiv 中。它按预期传递数据。加载manager.php到 DIV时唯一不起作用的是下拉菜单。我需要了解我做错了什么导致此功能，以便我可以防止将来这样做。
回答by ICodeForCoffee
You need to manually reset the dropdown after you've loaded the data into the everything div. I've modified your AJAX call to show you where to put the call.
将数据加载到所有 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();
}
});
The dynamic loading you're doing doesn't cause the DOM to reload forcing the drop down to be reinitialized. After you're AJAX call has completed, you can then reset the bootstrap drop down manually by calling .dropdown();.
您正在执行的动态加载不会导致 DOM 重新加载，从而强制重新初始化下拉列表。完成 AJAX 调用后，您可以通过调用手动重置引导程序下拉列表.dropdown();。
EDIT
编辑
Generally functions in bootstrap for features are setup using a $( document ).ready()call. This function executes once, after the DOM has been loaded and only after the DOM has has been fully loaded. Since your manipulating the DOM, you are not causing the function to be triggered again, and you need to manually trigger the feature you need.
通常，功能的引导程序中的功能是使用$( document ).ready()调用设置的。此函数执行一次，在 DOM 已加载后且仅在 DOM 已完全加载后。既然你操作了DOM，就不会导致函数再次被触发，需要手动触发你需要的功能。
You also want to load your includes only once on each page. They need to on manager.php in order for the function be available when you go into your success method. I'd suggest using a template for your project so you manage all your includes in one place. Also, if your using manager.php as a page to be included in another page, it's okay if you don't have the reference to the JavaScript pieces won't work since you don't want users accessing that component on it's own.
您还希望在每个页面上只加载一次包含。他们需要在 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.
您正在执行的重新加载似乎是强制将内容重新添加到页面中，从而强制$( document ).ready()重新执行包含文件中的调用。你可以这样做，但效率很低。
回答by PHP Worm...
you can't initialize the bootstrap component after page load by adding bootstrap clasaes. To do this you have to initialize it by your self
您无法在页面加载后通过添加引导程序类来初始化引导程序组件。为此，您必须自己初始化它
To initialize a dropdown write this code
要初始化下拉列表，请编写此代码
$('.dropdown-toggle').dropdown();
after
后
$('#everything').html(data);
for more details: http://getbootstrap.com/javascript/#dropdowns
回答by Brian Powell
So I'm not sure why this works, but it has so far:
所以我不确定为什么会这样，但到目前为止：
I've modified my ajax call to reload bootstrap's .js file prior to executing the return.
在执行返回之前，我修改了我的 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);
}
});
For the bounty, can someone explain to me:
对于赏金，有人可以向我解释一下：
a.) Why do I need to force the reload of bootstrap.min.js?
a.) 为什么我需要强制重新加载bootstrap.min.js？
b.) Why is this even necessary if I have a link to this file in BOTH files' <head>sections?
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">
I've also tried loading it in one, but not the other (so I don't load it twice,) and that doesn't do anything.
我也试过将它加载到一个中，而不是另一个（所以我不会加载它两次），但没有任何作用。
c.) Why does this work? What is it doing?
c.) 为什么这样做？它在做什么？
回答by Truong Hai Anh
page will load DOM 1st time. ajax just update a part of page, so new elements you add wont have prop you defined. you need to reinit as you did or make something like this
页面将第一次加载 DOM。ajax 只是更新页面的一部分，所以你添加的新元素不会有你定义的 prop。你需要像你一样重新初始化或做这样的事情
http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/
http://hussain.io/2012/01/reinitializing-jquery-event-on-ajax-response/
