Loop function not running after WooCommerce cart page update

Question

I'm trying to run a simple loop on the WooCommerce cart page. When the page initially loads, the function does it's thing, but on update of the cart, it becomes lifeless.

Here's my loop function:

let radios = document.querySelectorAll( 'input[name="radio_options_set"]' );

simplySetAttrs();

function simplySetAttrs() {

    // I started the var at 1 to skip the first radio input
    for (var xx = 1; xx < radios.length; xx++) {
        radios[xx].setAttribute( 'onclick', 'dothisFunction( this );' );
    }
}

The only WooCommerce event that has shown any response is 'updated_cart_totals' and the radio buttons I'm targeting on the Cart page are inserted by another plugin.

Here's how I implemented it:

jQuery( document.body ).on( 'updated_cart_totals', simplySetAttrs() );

I can't get to figure out why the very basic loop doesn't take action. If I do an alert(), it works as expected, even after setting a timeout on it.

I've also tried adding different event listeners as an alternative to setting the attributes, but to no avail.

Answer 1

You can use jQuery attr to setAttribute. Try the below code.

let radios = document.querySelectorAll( 'input[name="convert_to_sub"]' );

simplySetAttrs();

function simplySetAttrs() {
    // I started the var at 1 to skip the first radio input
    for (var xx = 1; xx < radios.length; xx++) {
        jQuery(radios[xx]).attr( 'onclick', 'dothisFunction( this );' );
    }
}