ajax 调用后引导下拉菜单不起作用（即使在重新初始化后）答案

【问题标题】：Bootstrap dropdown doesnt work after ajax call (even after reinitializing)ajax 调用后引导下拉菜单不起作用（即使在重新初始化后）
【发布时间】：2015-12-17 08:50:19
【问题描述】：

我扫描了 stackoverflow 并了解到它需要刷新 ajax .load() 上的下拉列表...但是不确定这是如何工作的，因为在单击下拉列表两次或三次后它会再次停止...：/

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>

【问题讨论】：

很高兴看到使用了“三次”这个词。
不确定。单击两次或单击三下后是否会失败？还是会有所不同？
如果我点击一个链接两次，但如果我继续在链接之间切换它会增加
如果您发布一些 HTML 可能会有所帮助
是否可以创建一个小提琴（使用 bootply 的 f.ex）来演示问题？

标签： jquery ajax twitter-bootstrap

【解决方案1】：

这是大约一年前的问题，但我遇到了类似的问题并且可以解决。所以我将分享我在几个小时搜索后学到的东西。一个重要的事实是 jquery 应该在引导之前包含。顺序很重要。 这是我测试的。

我的 index.html 文件是

<!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 标签中。我之前说过，顺序很重要。
head 标签中包含的jQuery AJAX 调用和load() 语句用于调用导航菜单nav_menu2.html。

我的 nav_menu2.html 是

    <!-- 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>

在正文标签中。我测试了它并且有效。

【讨论】：