Trigger default action after calling e.preventDefault() not working on WooCommerce

Question

Why does my code not work on a WooCommerce cart page (plain vanilla WooCommerce with Storefront theme)?

Nothing happens after $(this).trigger('click');

(function ($) {
    $(document).on('click', '.checkout-button, .cart-checkout-button, .button.checkout', function (e) {
        e.preventDefault();

        // do some stuff

        $(this).trigger('click');
        // e.currentTarget.click();   // doesn't work either
    });
})(jQuery);

I followed the instructions on this StackOverflow solution, but for whatever reason it doesn't work for me: https://stackoverflow.com/a/7610931/4688612

The console also doesn't throw any error.

Answer 1

The problem was that I declared a self invoking function, leading to some scoping issue. The following works:

jQuery(document).on('click', '.checkout-button, .cart-checkout-button, .button.checkout', function (e) {
    e.preventDefault();

    // do some stuff

    e.currentTarget.click();
});

I'm happy to give the accepted solution to someone who also can explain why the self invoking function wasn't working and what the logic should be when to decide to use one vs. not to use it.