避免在局部视图中进行JavaScript复制

Question

This code is used to remove a cart-item from a partial view.

$(document).on('click', '.RemoveLink', (function (e) {
    e.preventDefault();
    var recordToDelete = $(this).attr("data-id");
    var itemID = $(this).attr("data-itemid");
    if (recordToDelete != '') {
        $.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete, "itemID": itemID },
            function () {
                $('.container-cart').load('@Url.Action("cartDropDown","ShoppingCart")', function () {
                    $('.cart-dropdown').css('display', 'inline-block');
                }
                );
            });
    }
}));

This works well for the first iteration but from the second iteration on-wards, every click of a remove of an item is resulting in deletion of 2 items of a kind. Suppose we had 4 items of pencils and 8 items of pens. Clicking delete pencil button once will result in deletion of 2 pencils and vice versa.

This is probably because of the logic used. Following is the html that is rendered when $('.container-cart').load('@Url.Action("cartDropDown","ShoppingCart")' executes:

@model OnlineStore.ViewModels.ShoppingCartViewModel
<div class="container-cart">
    @if (Model.ItemCount == 0)
    {
        <div>
            <span>
                There are no items in your cart. Continue shopping.
            </span>
        </div>
    }
    else
    {
        <ul class="cart-dropdown">
            <li>
                <div class="cart-items cart-caption">
                    <ul>
                        @foreach (var i in Model.CartItems)
                        {
                            <li id="list-item-@i.item.ItemID">
                                <div class="container-fluid item-wrap" style="position: relative">
                                    <div class="item-remove">
                                        <a href="#" class="RemoveLink"
                                           data-id="@i.RecordID" data-itemid="@i.item.ItemID">
                                            x
                                        </a>
                                    </div>
                                    <div class="col-md-2 item-img">
                                        <div class="row-cart">
                                            <img alt="" id="cartImg" height="71" width="75" src="@i.item.ImageUrl">
                                        </div>
                                    </div>
                                    <div class="col-md-5 item-info">
                                        <div class="row-cart">
                                            <div class="brand-name">
                                                <a href="#" class="brandName">
                                                    @i.item.BrandName
                                                </a>
                                            </div>
                                            <div class="product-name">
                                                <a href="#" class="productName">
                                                    @i.item.ItemName
                                                </a>
                                            </div>
                                            <div class="product-qty">
                                                <p class="productQTY" id="item-count-@i.item.ItemID">
                                                    @i.Count x @i.item.ItemPrice
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-5 price-info">
                                        <div class="row-cart" style="margin-top: 10px">
                                            <div class="col-md-6">
                                                <div class="row-mrp">
                                                    <span class="cartItemPrice" id="item-total-@i.item.ItemID">
                                                        Rs @(@i.Count * @i.item.ItemPrice)
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        }
                    </ul>
                </div>
            </li>
            <li class="clearfix">
                <div class="col-md-6">
                    <div class="row-cart sub-cost" style="background: #fff; margin-left: -10px; margin-right: 0">
                        <p>
                            Sub Total :
                            <span style="float: right">
                                Rs
                                <span class="ng-binding"></span>
                            </span>
                        </p>
                        <p>
                            Delivery Charge :
                            <span qa="delChargeMB" style="float: right">Free</span>
                        </p>
                    </div>
                    <div class="row-cart cart-chkout-btn">
                        <button type="button">View Basket &amp; Checkout</button>
                    </div>
                </div>
            </li>
        </ul>
    }
</div> 

This html is the partial view that is initially rendered when user clicks a button to view the cart-items. So when user clicks on 'remove an item' button on this partial view, an ajax call is sent to server to remove an item from the cart-items and on success, load the UI again by rendering this partial view once again with new values from the database.

All this is working fine for the first iteration of the deletion of an item from the cart-item list. But when I'm deleting an item again as a second deletion, code is running twice. I'm guessing this is because <div class="container-cart"> is rendered twice on the page as after the first deletion, I can see it on the live DOM inside the browser that <div class="container-cart"> is encolsed inside another <div class="container-cart"> and then the normal elements are rendered in sequence. I'm guessing maybe that's why javaScript is rendered twice or running twice.

Please suggest what you think about it and help me resolve it.

Thanks in advance

Answer 1

After deletion of an item try to use location.reload(); instead of hitting the MVC action method again!