ajax调用后，Bootstrap下拉列表不起作用（即使重新初始化后） [英] Bootstrap dropdown doesnt work after ajax call (even after reinitializing)
问题描述
我通过stackoverflow扫描并了解它是否需要刷新ajax .load（）的下拉列表...但是不确定这是如何工作的，因为点击两次下拉或三次再次停止..：/
I scanned through stackoverflow and understood that its neccessary to refresh the dropdown on an ajax .load()...however not sure how this is working because after clicking the dropdown twice or thrice it stops again.. :/
jquery
$(document).ready(function () {
$("#ios").click(function(){
$("#maincontent").load("ios.html",function(){
$(".dropdown-toggle").dropdown();
});
});
});
html
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> Smart Phones <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ><a href="#" id="android">Android</a></li>
<li><a href="#" id="ios">IOS</a></li>
<li><a href="#" id="win">Windows</a></li>
</ul>
</li>
</ul>
推荐答案
这是一年前的问题，但我有类似的麻烦，可以搞清楚。所以我会在几个小时的搜索后分享我学到的东西。
一个重要的事实是在引导之前应该包含 jquery。订单很重要。
以下是我测试的内容。
This is about one-year old question but I have the similar trouble and could figure it out. So I will share what I learned after several hours searching. One important fact is that jquery should be included before bootstrap. The order matters. Here are what I tested.
我的index.html文件是
My index.html file is
<!DOCTYPE html>
<html>
<head>
<!-- Latest jQuery Core Javascript -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Latest compiled and minified Bootstrp CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jQuery AJAX call -->
<script>
$(document).ready(function() {
$('#navigation').load('/includes/nav_menu2.html');
});
</script>
</head>
<body>
<div id="navigation"></div>
Test is working!!!
</body>
</html>
-
请注意，jquery javascript和bootstrap css和javascript是包含在head tagg中。正如我之前所说的，订单非常重要。
Notice that jquery javascript and, bootstrap css and javascript are included in head tagg. The order is very important as I said before.
head标签中包含的jQuery AJAX调用和load（）语句用于调用导航菜单，nav_menu2.html 。
jQuery AJAX call included in head tag and load() statement is used to call navigation menu, nav_menu2.html.
我的nav_menu2.html是
My nav_menu2.html is
<!-- Navigation -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Homepage</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">CLASS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Physics</a></li>
<li><a href="#">Chemistry</a></li>
<li><a href="#">Calculus</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Orchestra</a></li>
<li><a href="#">PE</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">SPORTS<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Tennis</a></li>
<li><a href="#">Swimming</a></li>
<li><a href="#">Baseball</a></li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav><!-- /.navbar -->
最后，我把代码
<div id="navigation"></div>
。我测试过，它有效。
in body tag. I tested and it worked.
这篇关于ajax调用后，Bootstrap下拉列表不起作用（即使重新初始化后）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
