Этот код используется для удаления элемента корзины из частичного представления.
$(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 карандаша и наоборот.
Это, вероятно, из-за используемой логики. Ниже приводится HTML, который отображается при выполнении $('.container-cart').load('@Url.Action("cartDropDown","ShoppingCart")':
@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 & Checkout</button>
</div>
</div>
</li>
</ul>
}
</div>
Этот HTML-код является частичным представлением, которое первоначально отображается, когда пользователь нажимает кнопку, чтобы просмотреть элементы корзины. Поэтому, когда пользователь нажимает кнопку «удалить элемент» в этом частичном представлении, на сервер отправляется ajax-вызов, чтобы удалить элемент из корзины, и при успешном выполнении снова загрузите пользовательский интерфейс, снова отобразив это частичное представление с новыми значениями. из базы данных.
Все это прекрасно работает для первой итерации удаления элемента из списка элементов корзины. Но когда я снова удаляю элемент как второе удаление, код выполняется дважды. Я предполагаю, что это потому, что <div class="container-cart"> отображается на странице дважды, так как после первого удаления, я вижу это в реальном DOM внутри браузера, что <div class="container-cart"> находится внутри другого <div class="container-cart">, а затем нормальные элементы отображается в последовательности. Я предполагаю, может быть, поэтому javaScript отображается дважды или работает дважды.
Пожалуйста, предложите, что вы думаете об этом, и помогите мне решить это.
Заранее спасибо