如何检测Ajax加载的Uikit表单中radio单选框的选中变化事件

问题原因 #

你使用的这套UIkit主题通过data-md-icheck属性调用了iCheck插件做单选框样式美化，原生radio输入框会被插件隐藏，实际交互点击的是插件生成的模拟DOM元素，原生change事件被插件拦截，所以直接绑定input的change事件不会触发。

解决方案 #

分为两种情况处理：

情况1：站点已有全局iCheck初始化逻辑

直接绑定iCheck提供的专用状态变化事件ifChanged即可，支持Ajax加载的动态内容：

$(document).on('ifChanged', 'input:radio[data-md-icheck]', function () {
  // 拿到当前选中的选项值
  const currentValue = $(this).val();
  alert(currentValue);
});

情况2：Ajax加载内容后未初始化iCheck

先在Ajax请求成功、表单DOM插入页面后，先初始化iCheck组件，再绑定上述事件即可：

// 表单插入页面后初始化iCheck，配置和主题默认配置保持一致即可
$('input[data-md-icheck]').iCheck({
  checkboxClass: 'icheckbox_md',
  radioClass: 'iradio_md',
  increaseArea: '20%'
});

// 绑定状态变化事件
$(document).on('ifChanged', 'input:radio[data-md-icheck]', function () {
  const currentValue = $(this).val();
  alert(currentValue);
});

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