Html Bootstrap Popover-如何在文本Popover中添加链接？

我使用Bootstrap3Popover

现在我想在文本popvover上链接

代码：

”
数据原始标题=“测试标题”
>
测试链路

但当我开始用html编写代码时，我看到：

" 
数据原始标题=“测试标题”
测试链路

我知道symbol

“

中存在这个问题，但我不知道是否在链接中添加了链接

请告诉我怎样才能得到正确的代码

---

注意：如果问题已经存在，请给我链接。

在初始化popover时，您需要传递值为

true

的

html

选项，如下所示

JS:

$("[data-toggle=popover]")
.popover({html:true})

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">test link</a>

HTML:

$("[data-toggle=popover]")
.popover({html:true})

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">test link</a>

“数据原始标题=“测试标题”>测试链接

只需使用属性data html=“true”

<button
  data-toggle="popover"
  data-content="Link: <a href='xyz.com'>XYZ</a>"
  data-html="true">
  CLICK
</button>

点击

数据html=“true”>

---

只需添加数据html=“true”就可以使用link属性：）

值得注意的是，虽然给出的答案是正确的，但是当

数据触发=“focus”时，链接会导致问题“

已应用。正如我从一个客户端发现的那样，如果点击在弹出框上快速发生，链接将被执行，如果用户按下鼠标按钮，那么不幸的是，触发器将触发弹出框。因此，简单地考虑是否有链接是必要的，并为Surok点击计划。

< P>我使用了<代码>数据触发器=“焦点”< /代码>，并在POPOFE内容中链接了一个问题。如果在链接上单击鼠标按钮并保持一段时间，则弹出窗口将消失，链接“不起作用”。一些客户对此表示不满

HTML

你可以重现这个问题

我使用以下方法解决了这个问题：

html和

$("[data-toggle=popover]")
.popover({ html: true})
    .on("focus", function () {
        $(this).popover("show");
    }).on("focusout", function () {
        var _this = this;
        if (!$(".popover:hover").length) {
            $(this).popover("hide");
        }
        else {
            $('.popover').mouseleave(function() {
                $(_this).popover("hide");
                $(this).off('mouseleave');
            });
        }
    });

---

如果要在弹出窗口内使用焦点和链接，则需要防止在单击内部时关闭弹出窗口。我找到的最干净的解决方案是

preventDefault

在具有

.popover

类的弹出窗口中单击

$('body')
  .on('mousedown', '.popover', function(e) {
    e.preventDefault()
  });
});

---

为我做：基本上，把事情掌握在你自己的手中。同样，这是与popover选项

html:true

，

sanitize:false

，和

触发器：“focus”

一起使用的，但不能与“下一次单击时解除”（attribute data trigger=“focus”）。单引号（'）在数据内容中很重要吗？是的，我想是的。我提供了解决方法下面的“下一次单击时解散”案例。您用此案例拯救了我！谢谢！您也可以简单地在弹出窗口中添加一个短暂的延迟。请参阅

$("[data-toggle=popover]").popover({html:true})

$("[data-toggle=popover]")
.popover({ html: true})
    .on("focus", function () {
        $(this).popover("show");
    }).on("focusout", function () {
        var _this = this;
        if (!$(".popover:hover").length) {
            $(this).popover("hide");
        }
        else {
            $('.popover').mouseleave(function() {
                $(_this).popover("hide");
                $(this).off('mouseleave');
            });
        }
    });

$('body')
  .on('mousedown', '.popover', function(e) {
    e.preventDefault()
  });
});

$("body").on("mousedown",".my-popover-content a",function(e){
    document.location = e.target.href;
});