Jquery ajax调用后引导下拉菜单不起作用（即使在重新初始化之后）_Jquery_Ajax_Twitter Bootstrap

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

jquery ajax twitter-bootstrap

Jquery ajax调用后引导下拉菜单不起作用（即使在重新初始化之后）,jquery,ajax,twitter-bootstrap,Jquery,Ajax,Twitter Bootstrap,我浏览了stackoverflow，了解到有必要刷新ajax.load（）上的下拉列表……但我不确定这是如何工作的，因为在单击下拉列表两次或三次后，它会再次停止：/ jquery $(document).ready(function () { $("#ios").click(function(){ $("#maincontent").load("ios.html",function(){ $(".dropdown-toggle").dropdown

我浏览了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>

这是一个有一年历史的问题，但我也遇到了类似的问题，我可以解决它。所以我将分享我在几个小时的搜索后学到的东西。一个重要的事实是，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>


$（文档）.ready（函数（）{
$（'#navigation'）.load（'/includes/nav#u menu2.html'）；
});
测试成功了！！！

请注意，jqueryjavascript和引导css以及javascript都包含在head标记中。正如我之前所说，订单非常重要

head tag and load（）语句中包含的jQuery AJAX调用用于调用导航菜单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>

在body标签中。我测试了一下，它成功了

很高兴看到“三次”这个词被使用。不确定。单击两下或三下后会失败吗？或者它会变化吗？如果我点击一个链接两次，但如果我在链接之间不断切换，它会增加。如果你发布一些HTMLI，可能会有帮助。有可能创建一个提琴（f.ex使用bootply）来演示这个问题吗？