8

其他人在这里问了这个问题，但没有给出答案或解决方案。

这些引导文件列在我的 application.js 文件的顶部：

...
//= require bootstrap-tooltip
//= require bootstrap-popover
...

我的 bootstrap_additions.js.coffee 文件包含：

$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()

在一个视图中，我有：

<a href="#" class="btn" rel="popover" title="Title" data-content="Some content.">click</a>

当我在浏览器中输入 localhost:3000/assets/application.js 时，会出现 bootstrap-popover.js 内容。此外，我发现以下内容：

jQuery(function() {
    $("a[rel=popover]").popover().on('click', preventDefault());
    $(".tooltip").tooltip();
    return $("a[rel=tooltip]").tooltip();
});

单击链接时，浏览器显示将移至页面顶部。当我向下滚动到链接时，会显示弹出框。除 preventDefault 外，一切正常。我错过了什么？

谢谢。

更新：为了在我的代码中保持干净，我找到了所选答案的咖啡脚本版本：

$("a[rel=popover]").popover().click (e) => e.preventDefault()
4

4 回答 4

15

使用Twitter 引导弹出框

更新到 Coffeescript

第一种方法

实例化

$("a[rel=popover]").popover()

处理

$("a[rel=popover]").click (event) ->
  event.preventDefault()
  event.stopPropagation()
  $(this).popover "show"

第二种方法

直接取自他们的源代码：

$("a[rel=popover]").popover().click (e) ->
  e.preventDefault()
于 2012-11-14T05:22:39.767 回答
15

您也可以这样链接：

$("a[rel=popover]")
  .on('click',function(e){
    e.preventDefault();
  })
  .popover();
于 2014-02-13T16:30:41.617 回答
9

您可以使用“span”标签而不是“a”标签，这样就不需要阻止默认值。

也防止默认应该与一个事件相关联。

http://api.jquery.com/event.preventDefault/

于 2012-11-14T05:23:32.727 回答
0

首先，我要感谢 TontonBlach 的回答，因为它对我帮助很大。

但是我想知道为什么这个简单的功能不起作用并且阅读了https://getbootstrap.com/docs/3.3/javascript/#popovers上的官方手册（而不是 W3 学校）我发现我认为是正确的回答。

  1. 首先不应该有href标签

  2. 对于正确的跨浏览器和跨平台行为，您必须使用a标签，而不是button标签，并且您还必须包含 role="button" 和 tabindex 属性

修复它的方法是复制他们的（工作）示例并注意差异（对我来说是没有 tabindex）。另外值得注意的是 role="button" 与可访问性有关，因此在技术上不是必需的。

有了这个，您就可以正确使用默认.popover()功能来启动弹出窗口。

于 2017-09-28T08:50:34.430 回答