Minicart.js-项目已添加到购物车，但购物车未显示

Question

I have a click function on a button that adds an item to my cart using the Minicart.js library from minicartjs.com. When the button is clicked items are being added to the cart however, the cart is not popping up as expected. I've tested this on up to date versions of Chrome and IE (ie 11).

Some things I've noticed:

• In the debugger if I execute the show cart function paypal.minicart.view.show() the cart displays fine. Even with the items I've added.
• When my add button is clicked "class" is appended to the body with no actual class assigned:

• When the cart is showing a class "minicart-showing" is appended to the body.

The following script is at the end of a MVC partial View:

<script src="~/Scripts/minicart.js"></script>
<script>
    $(".showcart").click(function () {
        var data = $(this).attr("data-id");   
        paypal.minicart.cart.add(JSON.parse(data));
        // $("#body").toggleClass("minicart-showing"); <---doesn't work
        // paypal.minicart.view.show() <---- doesn't work
    });
paypal.minicart.render();
</script>

Answer 1

After further reviewing the minicartjs examples in the author's repository. I found that using e.stopPropagation() within the click function resolves the issue.

   $(".showcart").click(function (e) { // <--- added the e function
    var data = $(this).attr("data-id");
    e.stopPropagation(); // <--- And this line.
    paypal.minicart.cart.add(JSON.parse(data));
});

Code Example From Author's GitHub Repo