Adding Click Event to Woocommerce Asset

Hello Community,

I have trouble by adding any Jquery EventHandlers to the checkout.min.js located in the Woocommerce assets.

Here’s the Issue:

The checkboxes on the Checkout-Page, where you choose the payment method, is handled by a click-event inside the checkout.min.js. When loading the page, the event executes a initial click.

the uncompressed code is located in checkout.js line 154. here’s the code quote

/* Payment option selection */

	.on( 'click', '.payment_methods input.input-radio', function() {
		if ( $('.payment_methods input.input-radio').length > 1 ) {
			var target_payment_box = $('div.payment_box.' + $(this).attr('ID') );
			if ( $(this).is(':checked') && ! target_payment_box.is(':visible') ) {
				$('div.payment_box').filter(':visible').slideUp(250);
				if ( $(this).is(':checked') ) {
					$('div.payment_box.' + $(this).attr('ID') ).slideDown(250);
					console.log('!');
				}
			}
		} else {
			$('div.payment_box').show();
		}
		if ( $(this).data('order_button_text') ) {
			$('#place_order').val( $(this).data('order_button_text') );
		} else {
			$('#place_order').val( $('#place_order').data( 'value' ) );
		}
	})

	// Trigger initial click
	.find('input[name=payment_method]:checked').click();

Actually it’s okay, as long if you don’t add an event to the payment-methods.

Here’s what I wanna do:
If you click on a payment method, a custom field should be toggled by Jquery’s show() and hide() commands.

But somehow I don’t get a workaround except changing the core checkout-min.js

here is the snippet

$('#payment_method_cheque').click(function() {

console.log("executing click");

if ($('#payment_method_bacs').is(':checked') ) {
	 $('#data_retriever').val('basc');
}

if ($('#payment_method_cheque').is(':checked') ) {
	  $('#data_retriever').val('cheque');
}

});

Note: This code is loaded with the wordpress function bloginfo(‘template_url’).

But I dont’t get what happens.
First I’d tried to assign this code block to the $(document).ready, but this shows the console.log output, when the page has done loading. Same Result appears inside $(function(){ });
As standing alone or inside the window.load method the console retrieves no output at all.

But the init click isn’t the main issue here! Actually it’s fine. The problem is the click by mouse. Nothing happens if you click on the payment method. Commands like onChange doesn’t work either.. Only if I assign the code to checkout.min.js.

So, is there a way to execute the code outside the core file? Modifying Woocommerce directly isn’t a good solution, because you have to stick on the version you had changed. Updates of WooCommerce would destroy the whole thing. And Clients would execute an update sooner or later, even if notified not to do so.

Additional Notes: This issue does not appear because of another plugin.

https://wordpress.org/plugins/woocommerce/