triggerHandler阻止change事件触发，点击Radio外层Div无响应问题求助

嘿，我来帮你搞定这个问题！你遇到的核心问题是**triggerHandler('click')并不会触发浏览器原生的事件行为**——它只会执行你绑定在元素上的自定义事件处理函数，所以radio的change事件自然不会被触发，毕竟change是当radio选中状态发生改变时，浏览器原生抛出的事件，不是手动调用triggerHandler能触发的。

先拆解你原有代码的问题： #

1. 用attr('checked', 'checked')设置radio选中状态不够严谨，对于布尔类型的属性（比如checked），jQuery推荐用prop('checked', true)来设置，这样能正确同步DOM的真实状态。
2. triggerHandler不会触发浏览器的默认行为（比如radio被点击后的选中状态变化），也不会触发事件冒泡，更不会触发依赖状态变化的change事件。

推荐的解决方案： #

与其手动设置选中状态再触发事件，不如直接模拟用户点击radio的行为，这样既会自动处理radio的选中状态，也会自然触发click和change事件，完全符合浏览器的原生逻辑。同时把样式更新和业务逻辑统一放在change事件里处理，避免代码冗余。

完整代码如下：

HTML（保持不变）

<div class="inputwrapper"> <input type="radio" name="age1" value="30"> 0 - 30 </div>
<div class="inputwrapper"> <input type="radio" name="age2" value="60"> 31 - 60 </div>
<div class="inputwrapper"> <input type="radio" name="age3" value="100"> 61 - 100 </div>

jQuery

// 点击外层div时，模拟点击内部的radio
$('.inputwrapper').click(function(e) {
  // 判断点击目标不是radio本身时才模拟点击，避免重复触发事件
  if (!$(e.target).is('input[type="radio"]')) {
    $(this).find('input[type="radio"]').trigger('click');
  }
});

// 给所有radio绑定change事件，统一处理样式和业务逻辑
$('input[type="radio"]').change(function() {
  // 同步选中样式：当前radio的父级div添加selected，其他移除
  $(this).closest('.inputwrapper')
    .addClass('selected')
    .siblings('.inputwrapper')
    .removeClass('selected');
  
  // 你原本针对age2的业务逻辑
  if ($(this).attr('name') === 'age2') {
    alert('changed');
  }
});

为什么这样可行？ #

• 调用trigger('click')或者直接click()时，会模拟用户真实的点击行为，浏览器会自动处理radio的选中状态，同时触发原生的click和change事件。
• 把样式更新放在change事件里，不管用户是点击div还是直接点击radio，样式都会同步更新，逻辑更统一。
• 用closest('.inputwrapper')代替parent()或者children()，结构调整时代码更健壮。

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