为动态加载的迷你购物车移除按钮添加自定义点击事件

// 这种直接绑定方式在内容被替换后会失效
$('.remove_from_cart_button').click(function(e){
    e.preventDefault();
    // 执行移除操作的AJAX调用
    ajax_call();
});

$(document.body).on('click', '.widget_shopping_cart_content .remove_from_cart_button', function(e){
    e.preventDefault(); // 阻止默认行为，如链接跳转

    // 获取当前点击按钮的相关数据，例如商品键
    // 假设按钮或其父元素上有一个data属性存储cart_item_key
    // let cartItemKey = $(this).data('cart-item-key'); 

    // 调用AJAX函数执行移除操作
    ajax_call(); 
});

// 定义AJAX调用函数，用于从购物车中移除商品并更新迷你购物车内容
function ajax_call(){
    // 假设这里需要一个cart_item_key来移除特定商品
    // 为了演示，我们暂时硬编码一个值，实际应用中应从点击事件中获取
    let cartItemKey = 10; // 示例值，实际应动态获取

    $.ajax({
        url: ajax_url, // 您的AJAX处理URL
        type: 'post',
        data: {
            action : 'remove_from_cart', // 后端处理的动作
            'cart_item_key' : cartItemKey // 要移除的商品键
        },
        beforeSend: function(res){
            console.log('正在加载...');
            // 可以在此处显示加载指示器
        },
        success: function(res){
            // AJAX成功后，用返回的新内容替换迷你购物车区域
            // 这里的res应该是包含更新后迷你购物车HTML的响应
            $('.widget_shopping_cart_content').replaceWith(res);
            console.log('迷你购物车已更新。');
            // 可以在此处隐藏加载指示器
        },
        error: function(xhr, status, error) {
            console.error('AJAX请求失败:', status, error);
            // 处理错误情况
        }
    });
}

// 使用事件委托为动态加载的移除按钮绑定点击事件
// 确保此代码在DOM加载完成后执行
$(document).ready(function() {
    $(document.body).on('click', '.widget_shopping_cart_content .remove_from_cart_button', function(e){
        e.preventDefault(); // 阻止按钮的默认行为

        // 在这里，你可以从点击的按钮中获取需要传递给ajax_call()的特定数据
        // 例如，如果按钮有一个data-key属性：
        // let itemKey = $(this).data('key');
        // console.log('点击了移除按钮，商品键：', itemKey);

        // 调用AJAX函数执行移除操作
        ajax_call(); // 如果ajax_call需要参数，请在此处传递
    });
});