Add a second jquery function to an existing button?

There’s a button in my theme that updates one div (.cart_totals) and one form (.woocommerce-cart-form) on my cart page. In the theme’s template, this is the button:

<button type=”submit” name=”calc_shipping” value=”1″ class=”fusion-button button-default fusion-button-default-size button”><?php esc_attr_e( ‘Update totals’, ‘woocommerce’ ); ?></button>

I’m building a basic plugin that manipulates the display of the div and form elements by adding or removing classes, using jquery and custom buttons, for example like this:

<button class=”cart-multi-step-buttons” onclick=”cart_ms_1()”>
Step 1
</button>
<script>
function cart_ms_1() {
jQuery(‘.cart_totals’).addClass(‘visible1’);
jQuery(‘.woocommerce-cart-form’).addClass(‘visible1’);
}
</script>

But when the theme’s “calc_shipping” button is clicked and the div and form are reloaded, naturally those added classes are no longer there, so the display of the page reverts back to default instead of what I’ve set for the “visible1” class’s css.

So, is there a way to add a function to this button, so that after it has completed its main function and reloaded the div and form elements, it then completes a second function that adds the “visible1” class back to these elements?

Is there a way to do that from within my plugin, or do I need to edit the theme’s template and/or js files?

I tried just adding an onclick event to the button in the theme’s template, but that didn’t work. I also tried some versions of this:

jQuery(“button[name=’calc_shipping’]”).click(function(){jQuery…}

but that hasn’t worked (and I’m not quite sure where to put it, in my plugin or in the theme’s template, etc.)

Any help on this would be hugely appreciated!

If you go to our staging site and add our test product, you can see the general idea in action on our cart page (the button in question is on “Step 3”).

Read more here:: Add a second jquery function to an existing button?

Leave a Reply

Your email address will not be published. Required fields are marked *