jQuery控制的popover弹出层无法正常渲染button按钮的问题求助

核心问题及修复步骤 #

• 1. 修正内容区域选择器错误
     你当前popover初始化时，content回调内的选择器未加ID标识#，属于标签选择器，无法匹配到ID为popover-content的DOM元素，修改为：

content: function () {
    return $('#popover-content').html();
}

• 2. 修正鼠标事件绑定语法错误
     现有mousedown事件绑定缺少回调函数声明，修正为：

$('.hometable').mousedown(function(){
    $(this).popover("show");
});

• 3. 关闭Bootstrap默认内容安全过滤
     如果你使用的是Bootstrap 4及以上版本，popover默认开启sanitize内容清理功能，会对白名单外的HTML标签做过滤。<b>标签属于默认白名单内的标签可以正常显示，部分版本的默认白名单未包含button标签，会被过滤掉。你可以在popover初始化时关闭清理功能：

$('.hometable').popover({
    html: true,
    trigger: "manual",
    sanitize: false, // 新增此行关闭内容过滤
    title: function () {
        return $('#popover-title').html();
    },
    content: function () {
        return $('#popover-content').html();
    }
});

• 4. 修正表格标签语法错误
     你现有HTML中表格的td闭合标签写错为<td>，会导致DOM结构渲染异常，修改为</td>即可。

附加说明 #

如果需要给popover内的button绑定点击事件，因为popover内容是动态插入DOM的，要使用事件委托的方式绑定：

$(document).on('click', '#popover-content button', function() {
    // 按钮点击逻辑
});

内容的提问来源于stack exchange，提问作者Kiiiieeeeuuuw