JQuery

Question

我有一个简单的购物车系统，我正在使用 JQuery 在用户浏览网站时更新购物车商品。

我遇到的问题是，用户在购物系统中重新添加了一些商品后，删除功能不起作用。只有在页面刷新后它才会重新开始工作，然后在用户添加更多产品后停止...

故事是这样的：

产品页面加载，
用户点击产品添加到购物车，
JQuery 通过 ajax 将每次点击的产品添加到服务器，成功后购物车 HTML 会更新一组新产品（我没有附加到列表中，只是抓取所有项目并重新添加）。
用户决定通过打开购物车模式删除产品，并点击相应的项目。
项目已按预期移除。 Jquery 此时正在单独删除每个 li。
用户决定添加更多产品，完美运行。
用户决定删除产品...这就是它死的地方...

这是处理删除的代码：

/**
 * Delete an item from the cart
 */

$('.del-goods').click(function(){
    var itemId  = $(this).data("item");
    var url = "/cart/delete/item_id/" + itemId;

    $('#item-delete-' + itemId).html('<div style="color:red;">Deleting...</div>');

    //Set up Ajax to update the customers cart
    $.ajax({
        type:  'POST',
        async: true,
        url:   url,
        dataType: "json",

        success: function(responseObject){
            //If the response is successful
            if (responseObject.success)
            {
                $('.cart-info-count').text(responseObject.cart_item_count);
                $('.cart-info-value').text(responseObject.cart_item_total);
                $('#item-' + itemId).remove();
            } else {
                alert("Failed to delete item!");
            }

        }
    });

});

以下是我添加到购物车的功能。我怀疑问题是在我拉出一组新的下拉项时引起的，其中包括删除 link...

 $('.add2cart').click(function() {

    //The click event relating to the add product area
    var productId  = $(this).data("product");
    var area       = $(this).data("area");

    //Get the product quantity
    var quantity   = $('#' + area).find('input[name="productQuantity"]').val();

    //Make sure the quantity is an integer and not a float
    if ( Math.floor(quantity) != quantity)
    {
        quantity = 1;
    }

    //Make sure the quantity is numeric and not characters
    if ( ! $.isNumeric(quantity) )
    {
        quantity = 1;
    }

    //If quantity is zero, make it 1
    if ( quantity == 0 )
    {
        quantity = 1;
    }

    //Controller Route
    var url = '/cart/update-quantities/prod_id/' + productId + '/quantity/' + quantity;

    //Change the icon text to processing...
    $('#' + area).find('.add2cart').text('Processing...');

    //Update the datbase with the new cart item
    $.ajax({
        type:  'POST',
        async: true,
        url:   url,
        dataType: "json",

        success: function(responseObject){
            //If the response is successful
            if (responseObject.success)
            {
                //Write success to the clicked button
                $('#' + area).find('.add2cart').text('SUCCESS...');

                //Reset button to original state
                window.setTimeout(function () {
                    $('#' + area).find('.add2cart').text('ADD TO CART');
                }, 1500);

                //Update the view with the correct items in the cart
                $('.cart-info-count').text(responseObject.cart_item_count);
                //Update the view with the new cart total
                $('.cart-info-value').text(responseObject.cart_item_total);
                //Update the HTML (this pulls a whole fresh set of HTML)
                $('#cart-dropdown').html(responseObject.cart_item_dropdown_html);

            } else {
                //Write failed to the clicked button
                $('#' + area).find('.add2cart').text('FAILED...');

                //Reset button to original state
                window.setTimeout(function () {
                    $('#' + area).find('.add2cart').text('ADD TO CART');
                }, 1500);
            }

        }
    });

});

Answer 1

您必须使用事件委托，因为内容是动态变化的。

$(document).on('click','.del-goods',function(){

JQuery - 第二次删除不起作用

JQuery - Deleting a second time does not work

javascript