弹出窗口内容-按钮没有显示在弹出窗口内(JQuery/Javascript/HTML/Bootstrap)

Question

所以我使用FullCalendar(v5(，并且我已经成功地为时间线上的事件实现了popovers(使用bootstrap(。我想包含一个删除事件的按钮，但是该按钮没有出现在弹出窗口中。这真的很奇怪，因为html按钮标记被完全忽略了(将按钮元素放在另外两个元素之间进行检查(。代码如下：

eventDidMount: function (info) {
var content = 'Duration: ' + moment(info.event.startStr).format('hh:mma') + ' - ' + moment(info.event.endStr).format('hh:mma')                  
$(info.el).popover({
html: true,
title: info.event.title + '<button type="button" id="remove-btn">Remove</button>' + '<a href="#" class="close" data-dismiss="popover">&times;</a>',
placement: 'top',
trigger: 'click',
content:content,                                        
container: 'body'
});
$(document).on("click", ".popover .close", function () {
$(this).parents(".popover").popover('hide');
});
},

这个popover创建的结果可以在这里看到：弹出式显示器

该按钮应显示在标题和关闭按钮之间。值得注意的是，我已经尝试了几种不同的方法来实现这一点，比如创建隐藏的HTML元素并从回调函数中获取HTML，或者尝试将按钮元素放在内容字符串中而不是标题中。这两者都不起作用。如有任何帮助，我们将不胜感激。

编辑：这个Fiddle确切地展示了我试图实现的目标(按钮在内容字符串中，但我已经用我的解决方案尝试了这个代码，但它不起作用(

Answer 1

使用sanitize: false

$(info.el).popover({
html: true,
title: info.event.title + '<button type="button" id="remove-btn">Remove</button>' + '<a href="#" class="close" data-dismiss="popover">&times;</a>',
placement: 'top',
sanitize: false,
trigger: 'click',
content:content,                                        
container: 'body'
});