无法在 bootstrap 5 中的弹出窗口中添加结帐和清除购物车按钮

Question

我正在使用 BootStrap 版本 5.0.0 beta-2，我正在尝试在弹出窗口中动态添加按钮，但我做不到。我按以下顺序包含了脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

我更新弹出框的代码是这样的：

// Updating Popover

    function updatePopover(cart) {
        popStr = "";
        i = 1;
        popStr = popStr + "<div class='my-2 mx-1'>";
        for (item in cart) {
            popStr = popStr + "<b>" + i + ". </b>";
            popStr = popStr + document.getElementById('name' + item).innerHTML + " | <b>Qty:</b> " + cart[item] + "<br>";
            i += 1;
        }
        // Adding Clear Cart and Checkout buttons

        popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id='checkout'>Checkout</button></a> <button class='btn btn-primary' id='clearCart' onclick='clearCart();'>Clear Cart</button>";

        console.log(popStr);
        // Getting popcart by ID
        var popcart = document.getElementById('popcart')
        // Enabling popover
        var popover = new bootstrap.Popover(popcart, 'data-bs-content')
        // Setting new value of popcart
        popcart.setAttribute('data-bs-content', popStr);
        // Showing the popover
        popover.show();
    }

我的HTML划分是这样的：

{% for i in product %}
     <div class="col-xs-3 col-sm-3 col-md-3">
        <div class="card align-items-center" style="width: 18rem; border: 0px;">
             <img src="/media/{{i.product_img}}" class="card-img-top" alt="{{i.product_name}}">
                  <div class="card-body text-center">
                        <h6 class="card-title" id="namepid{{i.id}}">{{i.product_name}}</h6>
                            <p class="card-text">{{i.product_desc|slice:":25"}}{% if i.product_desc|length > 25 %}...{% endif %}</p>

                         <span id="divpid{{i.id}}" class="divpid">
                             <button id="pid{{i.id}}" class="btn btn-warning cart">Add to Cart</button>
                         </span>
                     <a href="product/{{i.id}}"><button id="vid{{i.id}}" class="btn btn-primary cart">View Product</button></a>
                 </div>
                 <!-- card body text end-->
              </div>
             <!-- card body items end-->
             </div>
        <!-- col-xs-3 col-sm-3 col-md-3 end-->
        {% if forloop.counter|divisibleby:4 and forloop.counter > 0 and not forloop.last %}
        </div>
            <div class="carousel-item">
                {% endif %} {% endfor %}
            </div>

Answer 1

好吧，所以我去了 BootStrap v5.0 的测试版文档，我知道默认情况下它会清除许多 HTML 元素，因此即使我正在编写代码来添加显示弹出窗口时正在对按钮进行消毒。为了防止按钮被清理，我在我的 JS 中添加了以下行：

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList;
myDefaultAllowList.button = ['type', 'onclick'];

此处提供我不想自动清理的属性列表。

Answer 2

这样做

$("#popcart").popover({
    html: true,
    sanitize: false
});

无法在 bootstrap 5 中的弹出窗口中添加结帐和清除购物车按钮

Can't add checkout and clear cart buttons in popover in bootstrap 5

javascript

django

jquery

bootstrap-popover

bootstrap-5