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');
        }

    });

}

编辑:我删除了以下按钮的禁用功能(使用 addClass 代替)，因为对于某些商品类型来说，如果您将商品添加到购物车，则似乎无法将商品添加到购物车这样做了:

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

如果有人知道原因，请告诉我。