使用jQuery触发radio单选框事件及初始化div显隐的正确方法

错误原因 #

你调用trigger()方法时没有传入要触发的事件名称，jQuery内部处理时找不到对应的事件对象，因此抛出了类型错误。

解决方法 #

方案1：修正trigger调用

直接给trigger方法传入要触发的change事件名即可，代码放在原有change事件绑定之后：

$(function () {
    $('input[name="Search.LatestOnly"]').on('change', function () {
        if ($(this).val() == 'true')
            $('#date-section').hide(400);
        else
            $('#date-section').show(400);
    });
    // 传入事件名，手动触发选中单选框的change事件
    $('input[name="Search.LatestOnly"]:checked').trigger('change');
});

方案2：逻辑封装（更易维护）

把显隐控制逻辑抽成独立函数，初始化和事件触发时都调用该函数，不需要手动触发事件，也能避免重复代码：

$(function () {
    // 抽离公共的显隐控制逻辑
    function toggleDateSection() {
        const isLatestOnly = $('input[name="Search.LatestOnly"]:checked').val() == 'true';
        $('#date-section').toggle(!isLatestOnly, 400);
    }
    // 绑定change事件
    $('input[name="Search.LatestOnly"]').on('change', toggleDateSection);
    // 页面加载完成后直接调用函数初始化状态
    toggleDateSection();
});

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