动态生成Radio输入框的Value与ID获取问题求助

你的问题出在事件委托的目标绑定错误上——你把change事件直接绑定到了document对象上，而没有指定要监听的具体radio元素。这就导致事件触发时，this指向的是整个document，而不是你点击的那个radio按钮，自然拿不到它的value或id。

修正后的代码示例 #

1. 获取Radio的ID

jQuery(document).on('change', 'input[type="radio"]', function (){
    // 原生JS写法更简洁直接
    alert(this.id);
    // 也可以用jQuery写法
    // alert(jQuery(this).attr('id'));
});

2. 获取Radio的Value（需先给Radio补充value属性）

你当前生成的radio标签缺少value属性，所以即使绑定正确，this.value也会是空字符串。先修改你的生成代码，补上value：

<input class="mb-1 ml-2" style="transform: scale(1.3);" type="radio" id="input-'+counter+'" value="'+counter+'">

再绑定事件获取value：

jQuery(document).on('change', 'input[type="radio"]', function (){
    alert(this.value);
});

关键原理说明 #

事件委托的核心是指定目标选择器——jQuery(document).on('change', '目标选择器', 回调函数)，这样当事件冒泡到document时，jQuery会检查触发事件的元素是否匹配目标选择器，匹配的话就执行回调，此时this就会指向那个触发事件的radio按钮，你就能正常获取它的属性了。

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