时间戳

首页 > 解决方案 > 尽管已初始化，但引导弹出窗口仍无法正常工作（脚本标签问题？）

javascript - 尽管已初始化，但引导弹出窗口仍无法正常工作（脚本标签问题？）

问题描述

我正在尝试将引导弹出窗口添加到我的 web 应用程序上的按钮，但由于某种原因它们没有显示。

我在 Django 模板中的 .js 脚本中启动弹出框：

$('[data-toggle="popover"]').popover();

我尝试了各种类似的实现，但没有任何成功。

尽管使用了可以在小提琴中使用的代码，但我无法在我的应用程序中重新创建效果。我假设这是脚本标签的问题，但尝试与某些解决方案中相同的标签也没有多大帮助。是有一些冲突还是我缺少一些标签？

这是我的脚本标签：

    <!-- Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
    <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
    <!-- Theme style  -->
    <link rel="stylesheet" href="../static/bootstrap/css/style.css">
    <!--star ratings-->
    <link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
    <script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

标签： javascriptdjangobootstrap-4

解决方案

像这样安排您的链接和脚本，并将您的引导 CDN 更改为最新版本4.3

<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--star ratings-->
<link rel="stylesheet" href="{% static 'star-ratings/css/star-ratings.css' %}">
<!-- Theme style  -->
<link rel="stylesheet" href="../static/bootstrap/css/style.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'star-ratings/js/dist/star-ratings.min.js' %}"></script>

弹出窗口示例

$(function () {
  $('[data-toggle="popover"]').popover()
});
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Prosto+One&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

推荐阅读