Question

我用ajax创建了添加到购物车的功能。我的问题是，当我将新项目添加到我的购物车，然后想要删除它时，我不能。但在页面回发后，我可以删除项目。我查看了有关我的问题的问题，但无法找到解决方案。我的代码如下：

/*============ Add item to dropdown cart ========*/
$(function () {
$("a.cart").click(function () {
    var item = $(this).attr("id");
    $.ajax({
        url: "/Home/AddItemToCart",
        data: { "itemId": item },
        dataType: "json",
        type: "POST",
        success: function (data) {
            if (typeof data.thumb != "undefined") {
                // append new item to cart place
            } 
        }
    });
});
});

/*============ delete item from dropdown cart ========*/
$(function () {
$('#mainNav #cart div.cart_content ul li').find('a.remove_item').on('click',
    function (e) {
        e.preventDefault();
        $(this).parents('li')
        .animate({ "opacity": "hide" }, "slow");
        var item = $(this).attr("id");
        var which = "shop";
        $.ajax({
            url: "/Home/DeleteItemFromCart",
            data: { "itemId": item, "which": which },
            dataType: "json",
            type: "POST",
            success: function (data) {
              // removing this item from cart place
            }
        });
    }
);
  });
  /*======= end it =========*/

Answer 1

如果不添加更多相关代码，您就会降低获得即时答案的可能性。考虑到这一点，我猜测你没有将相同的（如果有的话）点击事件处理程序（代码）附加到'AddItemToCart'Ajax success回调中新添加的项目。触发事件处理程序的唯一元素是在注册事件处理程序时已经存在于DOM中的元素，即在DOM就绪时。

虽然您可以选择重构代码以取消绑定并将click事件处理程序重新附加到页面上的所有匹配元素（直接绑定），但最好通过传递选择器将其更改为委托事件处理程序调用on()时的参数：

$('#mainNav #cart div.cart_content ul li').on('click', 'a.remove_item', function() {
  ...
});

追加后无法访问dom元素

1 个答案: