Bootstrap 4 未更新弹出框的 onclick 属性

Question

我试图在 bootstrap 4 中创建一个带有嵌套按钮的弹出框，但是在使用 button 元素更新该弹出框的 data-content 属性时，它会更新该元素，但缺少唯一的 onclick 属性。

我尝试使用按钮而不是锚标记，也尝试使用纯 JavaScript 更新元素，但问题仍然存在。 我已经有 popover 属性 html: true

这是更新的js代码

function popoverUpdate(cart){
    console.log("pop update");
    var popoverdata = "<ol>"
    for (i in cart){
        popoverdata +="<li>Item :" + i + ", Quantity : " + cart[i] + "</li>";
    }
    popoverdata += "</ol><a href='#' onclick='console.log(5);' class='btn btn-secondary'>Hello</a>";
    $('#cartVal').attr('data-content', popoverdata);
    $('#cartVal').popover('show');
}

我正在更新其数据内容的 HTML 元素

<button class="btn btn-primary m-lg-2" title="In Cart" id="cartVal" data-content="this is default content" data-toggle="popover" data-placement="bottom"
      data-trigger="focus">Cart(0)</button>

updation element(expected) => 

<a href='#' onclick='console.log(5);' class='btn btn-secondary'>Hello</a></pre>

instead updates to

<a href="#" class="btn btn-secondary">Hello</a>

as you can see onclick attribute is missing

Answer 1

这是一个技巧。首先，启用 data-html 属性，然后为单击按钮设置事件侦听器，最后阻止默认行为

function popoverUpdate(cart){
    console.log("pop update");
    var popoverdata = "<ol>"
    for (i in cart){
        popoverdata +="<li>Item :" + i + ", Quantity : " + cart[i] + "</li>";
    }
    popoverdata += "</ol><a href='#' class='btn btn-secondary popoverButton'>Hello</a>";
    $('#cartVal').attr('data-html', true);
    $('#cartVal').attr('data-content', popoverdata);
    $('#cartVal').popover('show');
    document.querySelectorAll('.popover-body a.popoverButton').forEach((button, index) => button.addEventListener('click', (event)=>{
    event.preventDefault();
    console.log(5);
    //put the rest of your code here
    }));

}