WooCommerce购物车更新后自定义循环函数无法运行问题求助

• 事件绑定参数错误：绑定updated_cart_totals事件时你传入的是simplySetAttrs()，加括号会立即执行一次函数，而非把函数作为回调传入事件监听器，事件触发时自然不会执行对应逻辑。
• 单选框节点引用过时：radios变量是页面首次加载时获取的静态节点集合，购物车更新后页面DOM会被刷新替换，你操作的还是已经被移除的旧节点，新插入的单选框根本没被纳入处理范围。
• 用setAttribute设置onclick的方式兼容性和灵活性较差，容易出现上下文绑定问题。

方案1：最小改动修复原有逻辑 #

把节点查询放到函数内部，同时修正事件绑定参数即可：

// 页面首次加载执行
simplySetAttrs();

function simplySetAttrs() {
    // 每次执行都重新获取最新的单选框节点
    let radios = document.querySelectorAll( 'input[name="radio_options_set"]' );
    // 下标从1开始，跳过第一个单选输入项
    for (var xx = 1; xx < radios.length; xx++) {
        radios[xx].onclick = function() {
            dothisFunction(this);
        };
    }
}

// 事件绑定只传函数名，不要加括号
jQuery( document.body ).on( 'updated_cart_totals', simplySetAttrs );

方案2：更稳定的事件委托方案（无需每次更新DOM后重新绑定） #

直接把事件绑定到永久存在的父级节点，不用关心单选框的插入时机：

jQuery(document.body).on('click', 'input[name="radio_options_set"]:not(:first-of-type)', function() {
    dothisFunction(this);
});

该方案不需要单独绑定updated_cart_totals事件，也不需要单独执行初始化逻辑，不管单选框什么时候插入DOM都能正常触发。

内容的提问来源于stack exchange，提问作者ToongeePrime