Question

我一直很难让Bootstraps popover在点击时显示，而不是在悬停时显示。我查看了此页面上的示例。 http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h

我复制了示例中的确切脚本src链接以及meta和link行。我也初始化popover无济于事。这是我正在使用的简化版本。

    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <link rel="stylesheet" type ="text/css" href="style.css" />     
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta charset="utf-8"> 

    </head>           
    <body>
                    <div id="container">
                        <a href="#" data-toggle="popover" title="Popover Header" data-trigger="click" data-content="Some content inside the popover">Toggle popover</a>
                    </div>
                    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                    <script>
                                $(document).ready(function(){
                                        $('[data-toggle="popover"]').popover();   
                                });
                    </script>
               </body>

我不知道这是否是正常的事情，但我尝试打开页面，右键单击a元素并单击inspect（在chrome中）。在右下方显示两个错误。

未捕获错误：Bootstrap的JavaScript需要jQuery

未捕获的TypeError：$（...）。popover不是函数

找不到JQuery？它肯定存在。当我将鼠标悬停在它上面时，该元素显示并显示文本，当我点击它时没有任何反应。

Answer 1

首先包含jQuery脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

在页面加载时将此错误记录到控制台：

    Uncaught Error: Bootstrap's JavaScript requires jQuery

意思是bootstrap js正在寻找jquery对象。

Bootstrap popover仅适用于悬停

1 个答案: