javascript - 第一次点击后禁用 WooCommerce 添加到购物车按钮会阻止提交

Question

我试图在用户单击 WooCommerce 添加到购物车 按钮时禁用它，原因有两个。

• 防止多次点击
• 向用户展示他们的点击做了什么

我使用了这段代码:

if ($('body').filter('.single-product')) {

    var add_cart_button = $('.single_add_to_cart_button');

    /* Disable button on add to bag click if button is active */

    add_cart_button.on('click', function(e) {

        if (!$(this).hasClass('disabled')) {
            $(this).prop('disabled', true); // Prevent multi adds
            $(this).addClass('disabled');
        }

    });

}

虽然这行得通，但它似乎也禁用了按钮，甚至可以正常工作，添加产品不起作用，因为表单提交似乎根本没有触发。

为什么会发生这种情况，我需要在此处更改什么？

Answer 1

通过提交事件来修复它...

由于 form 没有 name 属性，我不得不以另一种方式定位它:

if ($('body').filter('.single-product')) {

    var add_cart_button = $('.single_add_to_cart_button');

    add_cart_button.closest('form').on('submit', function(e) {

        var cur_atc_button = $(this).find('.single_add_to_cart_button');

        if (!cur_atc_button.hasClass('disabled')) {
            cur_atc_button.addClass('disabled');
        }

    });

}

编辑:我删除了下面的按钮禁用，因为对于某些项目类型，如果您这样做，它似乎无法将项目添加到购物车:

cur_atc_button.prop('disabled', true); // Prevent multi adds

如果有人知道为什么请告诉我。