为迷你购物车移除按钮添加自定义点击事件的问题求助

问题根源 #

你用Ajax替换.widget_shopping_cart_content的内容后，原来绑定了点击事件的移除按钮被新生成的DOM元素替换了。普通的click()事件绑定只对页面初始加载时就存在的元素生效，动态生成的新元素不会自动继承之前的事件绑定，所以点击失效。

正确实现代码 #

你之前尝试的事件委托思路是对的，但需要把完整的移除逻辑整合进去，还要注意动态获取商品的cart_item_key（别写死成10）。修改后的完整代码如下：

function ajax_call(cart_item_key){
    $.ajax({
        url: ajax_url,
        type: 'post',
        data: { 
            action: 'remove_from_cart',
            cart_item_key: cart_item_key 
        },
        beforeSend: function(){
            console.log('loading');
        },
        success: function(res){
            $('.widget_shopping_cart_content').replaceWith(res);
        }
    });
}

// 用事件委托绑定到静态父元素，确保动态生成的按钮也能触发事件
$(document.body).on('click', '.remove_from_cart_button', function(e){
    e.preventDefault();
    // 从当前点击的按钮上获取对应的cart_item_key（假设按钮有data-cart_item_key属性）
    const cartItemKey = $(this).data('cart_item_key');
    ajax_call(cartItemKey);
});

你之前的尝试无效的原因 #

• 第一种写法$('.widget_shopping_cart_content .remove_from_cart_button').click(...)：和最初的绑定方式一样，只能作用于页面加载时已存在的元素，内容替换后新按钮没有事件绑定。
• 第二种事件委托写法只做了阻止默认行为，没有调用ajax_call()执行移除逻辑，所以看起来没有效果。

优化建议 #

如果.widget_shopping_cart_content本身是页面加载时就存在的容器（只是内部内容被替换），可以把事件委托绑定到这个容器上，相比绑定到document.body性能更好：

$('.widget_shopping_cart_content').on('click', '.remove_from_cart_button', function(e){
    e.preventDefault();
    const cartItemKey = $(this).data('cart_item_key');
    ajax_call(cartItemKey);
});

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