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

Question

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

我试过使用 button 而不是 anchor 标签，也尝试使用普通 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 我正在更新其 data-content 的元素：

<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>

按预期更新元素：

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

而是更新为：

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

如您所见，缺少 onclick 属性。

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
    }));

}

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

Bootstrap 4 not updating onclick attribute of popover

javascript

jquery

bootstrap-4

popover