Javascript Bootstrap 弹出窗口不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26562366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap popover is not working
提问by Rodrigo de Farias
The bootstrap popover is not showing up my page
引导程序弹出窗口未显示我的页面
Here is my HTML:
这是我的 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>
Here are all the js and css files I've added:
这是我添加的所有 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")
Can someone tell me where is the problem?
有人能告诉我问题出在哪里吗？
PS: Is there a way to get the popover to work without having to write any script code?
PS：有没有办法让popover无需编写任何脚本代码就可以工作？
回答by KyleMit
From the Docs on Popovers:
Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
选择加入功能：
出于性能原因，Tooltip 和 Popover data-apis 是选择加入的，这意味着您必须自己初始化它们。
So you must call .popover()manually in JavaScript like this:
所以你必须.popover()像这样在 JavaScript 中手动调用：
$("[data-toggle=popover]").popover();
Or you can use whatever selector you want
或者你可以使用任何你想要的选择器
Here's an example using StackSnippets.
这是一个使用 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>Note: This is similar to the answer to Bootstrap TooltipNot Showing Up
注意：这类似于Bootstrap TooltipNot Showing的答案
回答by Alexandru
Although the accepted answer is fine, when dealing with popovers, please be careful of situations with double initialization as well (Fiddleexample). The below JavaScript will fail.
虽然接受的答案很好，但在处理弹出窗口时，请注意双重初始化的情况（小提琴示例）。下面的 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>
If you double-initialize and your popover uses values that may change or custom content, etc., you will be in a world of hurt:
如果你双重初始化并且你的 popover 使用了可能改变的值或自定义内容等，你将处于一个受伤的世界：
$(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>';
}
});
});
