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

问题描述

我正在使用 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>

我更新popover的代码是这样的：

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

解决方法

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

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

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