如何用Django+AJAX+jQuery实现无需刷新页面连续删除购物车商品

问题出在事件绑定方式：你直接给初始的.delete-product按钮绑定了点击事件，但通过AJAX更新购物车列表后，新生成的删除按钮没有绑定事件，导致只能删一次，必须刷新才能继续操作。

修复步骤： #

• 把直接绑定元素的方式改成事件委托，将点击事件绑定到不会被替换的父容器（比如#cart-list）上，这样新生成的按钮也能触发事件。
• 移除success回调里的this_val.show()，因为删除后该按钮已经被新的购物车列表HTML替换，无需再显示。

修改后的function.js代码： #

$(document).ready(function(){
    // 用事件委托绑定到父容器#cart-list
    $("#cart-list").on("click", ".delete-product", function(){
        let product_id = $(this).attr("data-product")
        let this_val = $(this)
        console.log(product_id);
        console.log(this_val);
    
        $.ajax({
            url:'/delete-from-cart',
            data:{
                'id':product_id
            },
            dataType: 'json',
            beforeSend: function(){
                console.log("IN before send");
                this_val.hide()
                console.log("IN after send");
            },
            success: function(response){
                console.log("Starting success");
                $("#cart-items-count").text(response.totalCartItems)
                $("#cart-list").html(response.data)
                console.log("successfully removed");
            },
            error: function(response){
                alert('error');
            }
        })
    })
})

额外检查点： #

• 确保core/async/cart-list.html模板里的删除按钮都带有正确的.delete-product类和data-product属性。
• 确认Django视图里的request.session更新逻辑正常（你的代码中request.session['cart_data_obj'] = cart_data这部分已正确处理）。

内容的提问来源于stack exchange，提问作者Harshaan Niles