javascript - JQuery - 第二次删除不起作用

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 8 年前。

我有一个简单的购物车系统，当用户浏览网站时，我使用 JQuery 更新购物车项目。

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

故事是这样的:

1. 加载产品页面，
2. 用户点击产品以添加到购物篮，
3. JQuery 通过 ajax 将每次点击的产品添加到服务器，成功后购物车 HTML 将更新为一组新的产品(我不会追加到列表中，只需获取所有项目并重新添加)。
4. 用户决定通过打开购物车模式来删除产品，然后点击相应的商品。
5. 项目已按预期移除。 Jquery 此时正在单独删除每个 li。
6. 用户决定添加更多产品，效果很好。
7. 用户决定删除产品...这就是它的消亡...

这是处理删除的代码:

/**
 * 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!");
            }

        }
    });

});

以下是我的添加到购物车功能。我怀疑问题是当我拉出一组新的下拉项目(其中包括删除链接)时引起的...

 $('.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

由于内容是动态更改的，因此您必须使用事件委托(delegate)。

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