jquery - Bootstrap 未按预期设置弹出窗口模板

Question

我正在尝试自定义用于引导弹出窗口的模板。我发现了这个...

$('.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'.

Answer 1

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

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