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

【问题标题】：bootstrap popover preventDefault for click is not working in a Rails 3.2 appbootstrap popover preventDefault for click 在 Rails 3.2 应用程序中不起作用
【发布时间】：2012-11-02 15:02:09
【问题描述】：

有人问过这个问题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()

【问题讨论】：

标签： jquery twitter-bootstrap coffeescript

【解决方案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()

【讨论】：

这不是我推荐的解决方案，但它确实有效。我用推荐的解决方案更新了我的问题。如果您将咖啡脚本版本添加到您的答案中，我将从我的问题中删除更新。

【解决方案2】：

你也可以这样链接：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我想我并不清楚：使用跨度标签意味着您不必阻止默认值，因此请尝试使用跨度标签。并且（作为另一个说明）您需要将事件传递给 preventDefault。
你说，“你需要传递一个事件来防止默认”，但文档清楚地说，“这个方法不接受任何参数。”您已经在事件对象本身上调用 preventDefault()。
我相信他的意思是你需要把它附加到一个事件上——e.preventDefault(); -- 虽然我可能弄错了
是的，我很抱歉...我的意思是...用词不当或粗心。

【解决方案4】：

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

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

首先应该没有href标签
为了正确的跨浏览器和跨平台行为，您必须使用 a 标签，而不是 button 标签，并且您还必须包含 role="button" 和 tabindex 属性

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

有了这个，您就可以正确使用默认的.popover() 函数来启动弹出框了。

【讨论】：