Bootstrap 未按预期设置弹出框模板答案

【问题标题】：Bootstrap not setting popover template as expectedBootstrap 未按预期设置弹出框模板
【发布时间】：2014-04-03 21:15:50
【问题描述】：

我正在尝试自定义用于引导弹出框的模板。我找到了这个...

$('.item').popover({
    html : true,
    placement: 'left',
    content: function(){
        return $(this).next('.our-popup').html();
    },
    template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})

这很好用！但现在我想让模板动态化，所以我改为以下

template: $(this).next('.our-popup').next('.our-template').html();

我得到一个错误。

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

我也试过这个...

template: function(){
  return $(this).next('.our-popup').next('.our-template').html();
}

我得到...

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type '#document' may not be inserted inside nodes of type '#document-fragment'.

【问题讨论】：

标签： jquery dom twitter-bootstrap-3

【解决方案1】：

我似乎找到了类似的答案here 不完全相同，因此不标记为重复。我还为其他人整理了一个jsfiddle

$(document).ready(function () {
  $('#popover').popover({
    html: true,
    title: function () {
        return $("#popover-head").html();
    },
    content: function () {
        return $("#popover-content").html();
    }
  });
});

【讨论】：