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

Question

此代码用于从局部视图中删除购物车项目。

$(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');
                }
                );
            });
    }
}));

这对于第一次迭代效果很好，但是从第二次迭代开始，每次单击删除某项都会导致删除2种同类项。 假设我们有4支铅笔和8支笔。 单击删除铅笔按钮一次将导致删除2支铅笔，反之亦然。

这可能是由于所使用的逻辑。 以下是执行$('.container-cart').load('@Url.Action("cartDropDown","ShoppingCart")'执行时呈现的html：

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

此html是用户单击按钮以查看购物车项目时最初呈现的局部视图。 因此，当用户在此局部视图上单击“删除项目”按钮时，会向服务器发送一个ajax调用，以从购物车项目中删除一个项目，成功后，通过使用新值再次渲染此局部视图来再次加载UI从数据库中。

对于从购物车商品列表中删除商品的第一次迭代，所有这些工作都很好。 但是，当我再次删除项目作为第二次删除时，代码运行两次。 我猜这是因为<div class="container-cart">在页面上呈现了两次，因为第一次删除后，我可以在浏览器中的实时DOM上看到<div class="container-cart">封装在另一个<div class="container-cart"> ，然后按顺序呈现普通元素。 我猜这也许就是为什么javaScript渲染两次或运行两次的原因。

请提出您的想法并帮助我解决。

提前致谢

Answer 1

删除项目后，尝试使用location.reload（）;。 而不是再次点击MVC操作方法！