Question

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

这些引导程序文件列在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。我错过了什么？

感谢。

更新：为了在我的代码中保持干净，我找到了所选答案的coffeescript version：

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

Answer 1

使用Twitter Bootstrap Popover

更新为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()

Answer 2

你也可以这样链：

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

Answer 3

您可以使用'span'标记而不是'a'标记，这样您就不需要阻止默认。

还要防止默认应该与事件相关联。

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

Answer 4

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

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

首先应该没有href标签
要获得正确的跨浏览器和跨平台行为，您必须使用a标记，而不是button标记，而也必须包含role =“button”和tabindex属性

修复它们（工作）的例子并注意到差异（对我而言是缺少tabindex）的原因是什么。另外值得注意的是，role =“button”与可访问性有关，因此不需要技术。

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

bootstrap popover preventDefault for click在Rails 3.2应用程序中不起作用

4 个答案: