Question

我已经研究了这个问题，因为它已经有10年了。技术变化和该帖子上的答案不能解决我的问题

我看过SO的几篇文章，但对于我来说似乎都不起作用

After refresh page content is showing和dynamic radio buttons as navigation not working until page refresh只是一些

我将数据附加到模态中的div，问题是当我打开模态时，动态内容未显示。当我删除在刷新页面之前仍显示的项目时，也是如此。

由于上述情况之一，状态添加文档不起作用

我添加了所有脚本，以防问题出在其中一个脚本中

<script>
    $(document).ready(function () {
        function removeItem(id) {
            var obj1 = JSON.parse(sessionStorage.getItem("cart")) || {};
            var items = obj1;
            for (var i = 0; i < items.length; i++) {
                if (items[i].id === id) {
                    alert(id);
                    items.splice(i, 1);
                    break;
                }
            }
            sessionStorage.setItem("cart", JSON.stringify(obj1));
        }

        $('.itemsInCart').on('click', 'p.remove-item', function (e) {
            e.preventDefault();
            var val = $(".remove-item").attr('data-id');
            removeItem(val);
        });
    });
</script>
<script>
    $(document).ready(function () {
        $("#displayTotal").hide();
        $('.btnProduct').on('click', function (e) {
            e.preventDefault();

            var id = $(this).data("id");
            var title = $(this).data("title");
            var rawPrice = $(this).data("price");
            var cart = sessionStorage.getItem("cart");
            var obj = [];
            if (cart) {
                obj = JSON.parse(cart);
            }
            obj.push({ "id": id, "title": title, "price": rawPrice });
            sessionStorage.setItem("cart", JSON.stringify(obj));

            $("#displayTotal").show();
        });
        function populateContainer() {
            var retrieveCartFromSessionStorage = sessionStorage.getItem("cart");
            var displayCartInSessionStorage = JSON.parse(retrieveCartFromSessionStorage);

            var total = 0;
            var formatter = new Intl.NumberFormat('en-GB', {
                style: 'currency',
                currency: 'GBP',
                minimumFractionDigits: 2
            });

            for (var p in displayCartInSessionStorage) {
                if (displayCartInSessionStorage.hasOwnProperty(p)) {
                    $(".itemsInCart").append('<p class="remove-item" data-id="' + displayCartInSessionStorage[p].id + '">' + displayCartInSessionStorage[p].title + ' ' + formatter.format(displayCartInSessionStorage[p].price) + " " + '<span class="text-danger">Remove Item</span></p>');
                    total += displayCartInSessionStorage[p].price;
                }
            }

            var basicPrice = $("#aircraft-basic-price").attr('data-basic');
            var sum = parseFloat(basicPrice) + parseFloat(total);

            $("#displayTotal").text(formatter.format(sum));
        }

        populateContainer();
    });
</script>

模态为：

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4>Products</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
            <p class="text-center text-muted">Items in Cart</p>
            <div class="itemsInCart">
            </div>
        </div>
        <div class="modal-footer"><button class="btn btn-light" type="button" data-dismiss="modal">Close</button><button
                class="btn btn-dark" type="button">Checkout</button></div>
    </div>
</div>

Answer 1

我认为问题在于打开模态之前您没有运行populateContainer();。将populateContainer();放在$("#displayTotal").show();之前，这样可以解决您的问题。

在刷新页面之前，不显示/删除动态内容

1 个答案: