给按钮添加class导致Bootstrap 5 popover功能异常的原因是什么？

问题根因 #

你将动态生成的HTML字符串直接嵌入到data-bs-content属性值中时，出现了引号嵌套冲突：

• data-bs-content的属性值是用双引号包裹的
• 调用popoverContent()返回的带btn类的HTML里，类属性也是双引号包裹的，直接插入后会提前闭合data-bs-content的引号，导致整个属性解析错乱，就出现了你观察到的class=" btn"=""的异常格式。
  未添加btn类时，返回的button标签没有带双引号的属性，不会触发冲突，因此运行正常。

解决方案 #

有两种常用修复方式：

方案1：使用Bootstrap Popover的content配置项传入HTML（推荐） #

不要把动态内容拼到DOM的data-bs-content属性里，初始化popover时直接通过JS的content参数传入，从根源避免引号冲突：

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, {
  sanitize: false,
  html: true,
  content: function() {
    let buttonsDiv = document.createElement("div")
    let delButton = document.createElement("button");
    delButton.textContent = 'delete';
    delButton.classList.add('btn');
    buttonsDiv.appendChild(delButton);
    return buttonsDiv.innerHTML;
  }
}))

对应的HTML代码中删除data-bs-content="${popoverContent()}"属性即可。

方案2：转义返回HTML中的双引号 #

如果一定要把内容拼在data-bs-content属性里，把返回的HTML中的双引号全部转义为"即可：

let popoverContent = function ( ) {
    let buttonsDiv = document.createElement("div")
    let delButton = document.createElement("button");
    delButton.textContent = 'delete';
    delButton.classList.add('btn');
    buttonsDiv.appendChild(delButton);
    // 转义双引号避免属性解析冲突
    return buttonsDiv.innerHTML.replaceAll('"', '"');
}

注意：你配置了sanitize: false，如果popover内容包含用户可输入的内容，存在XSS攻击风险，非必要不要关闭内容校验。

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