我试图从购物车中删除产品而不刷新整个页面,我可以删除一个项目,然后我需要重新加载页面来删除另一个项目.我正在使用Django、jQuery和AJAX在经过类似性质的问题后获得预期的结果.在另一个分支中,我实现了自动刷新功能,删除后页面自动重新加载,但这不是很好的用户体验.

任何帮助都将不胜感激.

以下是我的views.py从购物车中删除商品的功能

def delete_item_from_cart(request):
    cart_total_amt = 0
    product_id = str(request.GET['id'])
    if 'cart_data_obj' in request.session:
        if product_id in request.session['cart_data_obj']:
            cart_data = request.session['cart_data_obj']
            del request.session['cart_data_obj'][product_id]
            request.session['cart_data_obj'] = cart_data

    if 'cart_data_obj' in request.session:
        for p_id, item in request.session['cart_data_obj'].items():
            cart_total_amt += int(item['qty']) * float(item['price'])
    
    context = render_to_string("core/async/cart-list.html", {"cart_data":request.session['cart_data_obj'], 'totalCartItems':len(request.session['cart_data_obj']), 'cart_total_amount':cart_total_amt})
    return JsonResponse({"data":context, "totalCartItems":len(request.session['cart_data_obj'])})

下面是我的unction.js实现

$(document).ready(function(){
    $(".delete-product").on("click", 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");
                this_val.show()
                $("#cart-items-count").text(response.totalCartItems)
                $("#cart-list").html(response.data)
                console.log("successfully removed");
            },
            error: function(response){
                alert('error');
            }
        })
    })
})

无需刷新页面即可删除购物车中的下一个项目

推荐答案

您可以try 通过事件委派将事件侦听器附加到DOM中更高的位置,它会将单个事件侦听器附加到父元素,然后对任何现有的或future 的.data-product个元素运行:

$(document).ready(function(){
    // for example
    $("#cart-list").on("click", ".delete-product", function() {
        // same code here
    })
})

这可能有助于将单击事件侦听器附加到#cart-list,并将.delete-product Select 器添加到任何新的.delete-product元素,从而修复由于事件侦听器丢失而必须刷新的问题?

参考资料:

Python相关问答推荐

Pandas滚动分钟,来自其他列的相应值

从包含数字和单词的文件中读取和获取数据集

如何根据另一列值用字典中的值替换列值

返回nxon矩阵的diag元素,而不使用for循环

通过优化空间在Python中的饼图中添加标签

如何在msgraph.GraphServiceClient上进行身份验证?

如何计算两极打印机中 * 所有列 * 的出现次数?

Polars比较了两个预设-有没有方法在第一次不匹配时立即失败

仿制药的类型铸造

如何使用Python将工作表从一个Excel工作簿复制粘贴到另一个工作簿?

运行终端命令时出现问题:pip start anonymous"

如何请求使用Python将文件下载到带有登录名的门户网站?

在极性中创建条件累积和

如何使用Pandas DataFrame按日期和项目汇总计数作为列标题

Python导入某些库时非法指令(核心转储)(beautifulsoup4."" yfinance)

如何保持服务器发送的事件连接活动?

在两极中过滤

为什么numpy. vectorize调用vectorized函数的次数比vector中的元素要多?

搜索按钮不工作,Python tkinter

计算空值