Run jQuery after WooCommerce AJAX shipping method update

Question

A jQuery function needs to initialize after shipping options have been updated, on the checkout page, through an ajax call, and the Woocommerce custom event updated_shipping_method has been triggered.

My jQuery snippet is set-up to listen to this event - but this is not functioning as intended.

jQuery( document.body ).on( 'updated_shipping_method', function(){
  // Code stuffs

  // has the function initialized after the event trigger?
  console.log('on updated_shipping_method: function fired'); 
});

I've tried the updated_wc_div custom event as well to no avail.

I'm using a similar method, almost verbatim, on the cart page to listen to the custom event trigger for updated_cart_totals and it works perfectly. Not sure why this isn't the case for the checkout page.

Answer 1

Correct Custom Event: updated_checkout

The code snippet in question was listening to the incorrect Woocommerce custom event.

The correct custom event to listen to in this case is updated_checkout.

When selecting a new shipping method, Woocommerce fires an ajax call to update the cart totals to reflect the price of the shipping method selected, then triggers updated_checkout.

So if updated_checkout is listened to, rather than updated_shipping_method, the script is fired as intended.