Livewire传值后jQuery动态渲染的radio按钮无法获取选中值如何解决？

• 选择器匹配错误：你绑定change事件时使用的是类选择器$('.coinNetwork')，但目标radio单选按钮的类名为custom-control-input，coinNetwork是name属性值而非类名，选择器无法匹配到任何元素，事件绑定自然失效。
• 动态元素事件绑定方式错误：所有radio元素是页面加载完成后动态插入DOM的，直接使用.on('change', callback)的写法只会给绑定时已经存在的DOM元素绑定事件，后续新增的动态元素无法触发该事件，需要使用事件委托方案，将事件绑定到页面初始就存在的父级元素上。
• 潜在的渲染时机偏差问题：你在window.load回调中执行列表渲染逻辑，但Livewire触发的networksEvent可能晚于window.load事件触发，此时networks还未被赋值，会导致列表根本没有渲染出来。

调整后的JS代码如下：

let networks
window.addEventListener('networksEvent' , event => {
    networks = event.detail.networks;
    // 拿到数据后立即执行渲染，避免时机偏差
    renderNetworkList(networks);
});

function renderNetworkList(networks) {
    $.each(networks, function( index, network ) {
        const checked = index == 0 ? "checked" : ''
        $('#networlist').append(`<li>
            <div class="custom-control custom-checkbox custom-control-pro no-control">
                <input type="radio" ${checked} class="custom-control-input" name="coinNetwork" value="${network.id}" id="${network.id}">
                <label class="custom-control-label english" for="${network.id}">${network.name}</label>
            </div>
        </li>`);
    });
}

// 采用事件委托，绑定到初始就存在的父元素#networlist，指定目标元素为name=coinNetwork的input
$('#networlist').on('change', 'input[name="coinNetwork"]', function() {
    console.log($('input[name="coinNetwork"]:checked', '#networlist').val())
});

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