Javascript 如何动态地将html放入bootstrap 2.3.2 popover中

我有一个按钮，当我将鼠标悬停在上面时，我想在其中创建一个包含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 ');
});

我无法将html正确地输入到popover中。

---

有人能帮我一下吗。

您的实际问题是“数据内容=”+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>">

---

这里的实际问题是“数据内容=”+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>">

---

您的问题是字符串连接，我将创建如下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
});

---

演示：

您的问题是字符串连接，我将创建如下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
});

---

演示：

不确定是需要使用popover动态创建链接，还是只需要使用内部html创建popover。我有一个演示如何使用自定义html动态创建popover

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

---

不确定是需要使用popover动态创建链接，还是只需要使用html内部创建popover。我有一个演示如何使用自定义html动态创建popover

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

---

由于这个问题与你之前的问题有关，你应该提到这一点。您应该使用一些整洁的工具来纠正代码的缩进。再次感谢您对上一个问题的帮助。最后一个问题解决了。这是我遇到的一个相关问题，但我试图简化这个问题，让它独立存在。我已经按照你的建议整理了密码。-Bill但是如果是后续问题，你仍然应该始终将上一个问题链接起来，这将使其他人更容易真正理解你的问题。因为这个问题与你之前的问题相关，你应该提到这一点。您应该使用一些整洁的工具来纠正代码的缩进。再次感谢您对上一个问题的帮助。最后一个问题解决了。这是我遇到的一个相关问题，但我试图简化这个问题，让它独立存在。我已经按照你的建议整理了密码。-Bill但是如果是后续问题，你仍然应该始终链接上一个问题，这将使其他人更容易真正理解你的问题。我真的很喜欢这个解决方案！我需要做的是将它与中的代码结合起来，因为最终html将通过ajax从服务器上重新生成。您可以调用ajax，当它成功返回html时，调用.donefunction{}中的上述函数；将HTML内容传递到htmlContent:。我建议使用GET而不是post，比如$.btn.nav-btn.hoverfunction{//call ajax.doneffunctionhtml{createHoverPopoverhtml，$this，bottom；}；我真的很喜欢这个解决方案！我需要做的是将它与中的代码结合起来，因为最终html将通过ajax从服务器上重新生成。您可以调用ajax，当它成功返回html时，调用.donefunction{}中的上述函数；将HTML内容传递到htmlContent:。我建议使用GET而不是post，比如$.btn.nav-btn.hoverfunction{//call ajax.doneffunctionhtml{createHoverPopoverhtml，$this，bottom；}；