Question

我有一个按钮，当我将鼠标悬停在它上面时，我想创建一个包含html动态的引导程序。到目前为止，我有：

$(".btn.btn-navbar").hover(function() {
  html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
  $link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover"' 
          + ' data-content="' + html + '">');

  console.log('$link', $link);
  $(this).html($link);

  // Trigger the popover to open
  $link = $(this).find('a');
  $link.popover("show");
}, function() {
  console.log('$hi there ');
});

jsfiddle

我无法正确地将html加入到popover中有人可以帮我一把。

Answer 1

不确定是否需要使用popover动态创建链接，或者您只需要在内部创建带有html的popover。我有jsFiddle显示如何使用自定义html动态创建popover。

function createHoverPopover(htmlContent, jqueryElement, direction) {
jqueryElement.popover({
    html: true,
    placement: direction,
    trigger: "hover",
    content: htmlContent,
    selector: true
}); }

Answer 2

这里的实际问题是' data-content="' + html + '">'

你应该把自己联系在一起，看看发生了什么结果将是：

<a href="myreference.html" class="p1" data-html="true" data-bind="popover" data-content="<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>">

问题出在这一部分：

data-content="<ul class="nav"><li>

data-content属性仅包含<ul class=，另外您的<a>标记将在此处data-content="<ul class="nav">

要正确地将html添加到data-content，您应该这样做：

html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
$link.data('content', html);

Answer 3

你的问题是字符串连接，我会创建像

这样的html元素

html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
$link = $('<a />', {
    href: 'myreference.html',
    "data-html": 'true',
    "data-bind": 'popover',
    "data-content": html
});

演示：Fiddle

如何动态地将html引入bootstrap 2.3.2 popover

3 个答案: