引导弹出窗口不起作用答案

【问题标题】：Bootstrap popover is not working引导弹出窗口不起作用
【发布时间】：2014-12-21 03:27:54
【问题描述】：

引导弹出窗口没有显示我的页面

这是我的 HTML：

<button type="button" class="btn btn-lg btn-danger" 
        data-toggle="popover" title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">
     Click to toggle popover
</button>

这里是我添加的所有 js 和 css 文件：

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/bootstrap-theme.css")
@Styles.Render("~/Content/css/default.css")

@Scripts.Render("~/Scripts/jquery-2.1.1.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/bootstrap.js")

谁能告诉我问题出在哪里？

PS：有没有办法让弹出框工作而无需编写任何脚本代码？

【问题讨论】：

你确定，你的脚本包括对吗？你能在 JSFiddle 上重现错误吗？

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 popover

【解决方案1】：

来自Docs on Popovers：

选择加入功能：
出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

所以你必须像这样在 JavaScript 中手动调用.popover()：

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

或者你可以使用任何你想要的选择器

这是一个使用 StackSnippets 的示例。

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

body {
  padding: 50px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

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


<button type="button" class="btn btn-lg btn-danger" 
        data-toggle="popover" title="Popover title" 
        data-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

注意：这和Bootstrap Tooltip Not Showing Up的回答类似

【讨论】：

我将您的代码复制并粘贴到我的页面中，但出现以下错误：$(document).ready(function () { $("#teste").click(function () { $ ("[data-toggle=popover]").popover();// 'undefined is not a function' });
a)，您不需要在 click 函数中嵌套弹出框初始化。它应该在页面加载时立即发生。 b）undefined is not a function 通常表明您没有使用您认为的库。由于我们无法看到您机器上的@Scripts.Render 内部发生了什么，因此很难准确地说出，但我的猜测是它没有找到正确的文件。您可以尝试将普通脚本引用添加到我在 sn-p 中的 jQuery 和引导 CDN。如果这些工作正常，您就知道您的脚本没有正确加载。
我把所有的脚本放在标签之后

【解决方案2】：

虽然接受的答案很好，但在处理弹出框时，请注意双重初始化的情况（Fiddle 示例）。下面的 JavaScript 将失败。

<br/>
<br/>
<a href="#" id="firstButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Working)</a>
<br/>
<br/>
<a href="#" id="secondButton" class="btn btn-primary" rel="popover" data-message="Message">Click Me (Failing)</a>

如果您双重初始化并且您的弹出框使用可能会更改的值或自定义内容等，您将处于一个受伤的世界：

$(function () {
    $('#firstButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
    $('#secondButton').popover(); // <-- The first initializer does this, which causes the next one to fail on the next line.
    $('#secondButton').popover({
      container: "body",
      html: true,
      content: function () {
        return '<div class="popover-message">' + $(this).data("message") + '</div>';
      }
    });
});

【讨论】：

Alexandru 的这个“警告”非常重要。如果您有一个通用的 .js 库，并且您总是使用 $('[data-toggle="popover"]').popover() 选择加入弹出框，请特别小心。然后，如果您想稍后选择使用不同参数的不同弹出框，这将每次都咬您。

【解决方案3】：

一个稳健的解决方案是 在 bootstrap javascript 之前编写 jquery、popper 的 script 标签.

像这样，

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

【讨论】：

你能添加一些代码来显示它的样子吗？

【解决方案4】：

所以，这对我有用。我最初在 a 函数中使用了$("[data-toggle=popover]").popover();，就像在引导文档中建议的那样。它不适合我。我把sn-p从函数中取出来了。

【讨论】：